前端(Vue)上传图片到七牛云与后端(Django)上传图片到七牛云

前端(Vue)上传图片到七牛云与后端(Django)上传图片到七牛云

在开发项目的时候，经常会用到上传图片的功能，如果把图片全都存放在项目路径下，会导致项目越来越臃肿，因此可以考虑把图片上传交给第三方处理，此处采用七牛云进行图片存储。

经过测试，通过七牛云获取图片确实比直接通过自己的服务器获取的速度要快得多，赶快去注册七牛云吧。

上传方式
上传图片的方式有两种：

1 .通过服务器：将文件传到服务端，由服务端上传到七牛云

2 .通过前端JS：将文件直接从JS上传到七牛云。

3 .两种方式都可以完成上传，但是前者还需占用服务端的带宽来上传文件，然后再由服务端上传；而后者仅占用客户端的资源，这样可以减轻服务端的压力。

Vue上传图片到七牛云

<template>
  <div class="upload-info">
    <div>
      <el-upload
          class="upload-pic"
          :action="domain"
          :data="QiniuData"
          :on-remove="handleRemove"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :before-remove="beforeRemove"
          :before-upload="beforeAvatarUpload"
          :limit="3"
          multiple
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
        <el-button size="small" type="primary">选择图片</el-button>
      </el-upload>
      <div>
        <img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
      </div>
    </div>
    <div>
      <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      <el-button type="info" plain >取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      QiniuData: {
        key: "", //图片名字处理
        token: "" //七牛云token
      },
      domain: "https://upload-z2.qiniup.com", // 七牛云的上传地址（华南区）
      qiniuaddr: "http://xxxx.com", // 七牛云的图片外链地址
      uploadPicUrl: "", //提交到后台图片地址
      fileList: []
    };
  },
  mounted() {
    this.getQiniuToken();
  },
  methods: {
    handleRe