三种图片上传的模式

  1. 使用 vue 上传到七牛云 (推荐使用)
  2. 使用 django 上传到七牛云
  3. 将图片保存到 django (极力不推荐)

vue上传图片到七牛云如何完成?

先下载 qiniu

pip install qiniu

在 后端 django

#获取七牛token
from qiniu import Auth
class QiNiu(APIView):
	def get(self,request):
		#声明秘钥对象 
		#对应七牛云里面的 AK          SK
		q = Auth('asda654sdasd','asdasdas324566')
		#生成令牌                 对应七牛云里面的  空间名称
		token = q.upload_token('lalalaa')
		return Response({'uptoken':token})

在前端 vue页面中

<template>
	<div>
	
		七牛云上传:<input type="file" @change="upload_qiniu">
		
	</div>
</template>
<script>
export default {
    data:function(){
        return{

			uptoken:'',
		
        }
    },
    mounted:function(){
        //获取秘钥
        this.get_token()
       
    },

    methods:{

        //获取秘钥方法
        get_token:function(){
            this.axios.get('http://127.0.0.1:8000/uptoken/').then((result) => {
                console.log(result);
                //获取秘钥
                this.uptoken = result.data.uptoken
            });
        },
		
        //上传七牛云
        upload_qiniu:function(e){
            //声明文件对象
             let file = e.target.files[0]
             //声明参数类型
             let param = new FormData()
             //添加文件
            param.append('file',file)
            param.append('token',this.uptoken)
            
            //定制 axios 请求
            const axios_qiniu = this.axios.create({withCredentials:false})
            axios_qiniu({
                method:'post',
			//生成url 华北 z1
                url:'http://up-z1.qiniu.com/',
                data:param,
                timeout:30000,  时间延迟
            }).then((result)=>{
                console.log(result)
            })
        },
	
}
</script>
<style>
</style>

存储系统其他的选择

  • Fast DFS分布式文件存储系统:
    • 需要自己搭建,使用起来麻烦
    • 局域网内可用,对外网可用需要申请公网IP或者域名
    • 小文件服务系统,当数据过大时会出现性能问题
  • 其他云的文件存储系统
    • 即开即用,接口调用简单方便,无需自己搭建
    • 分布式,高可用,不用为性能和运维问题担忧
    • 技术支持给力,文档齐全
    • 公网可直接访问
Logo

前往低代码交流专区

更多推荐