0000-Vue上传通过“服务端签名后直传”上传文件到阿里云

版权声明：本文为博主原创文章，未经博主允许不得随意转载。 https://blog.csdn.net/zhaojianrun/article/details/84647865

一、功能定义 

import { $apis } from '../../apis'
import axios from '../../http'
import uuid from 'uuid'
export default {
  state: {},
  getters: {},
  mutations: {},
  actions: {
    getAllOss({commit }) { // 获取服务端传递过来的阿里oss签名
      return new Promise((resolve, reject) => {
        $apis.getSignatureInfo()//此处为封装的获取服务端相关参数的方法
          .then((res) => {
            resolve(res)
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    setParams ({commit}, params) { // 设置请求参数
      let formData = new FormData()

      let filename = `${uuid.v4()}.${params.file.type.split('/')[1]}`
      // 文件名字，可设置路径
      formData.append('key', `${params.dir}${filename}`)
      // policy规定了请求的表单域的合法性
      formData.append('policy', params.policy)
      // Bucket 拥有者的Access Key Id
      formData.append('OSSAccessKeyId', params.accessid)
      // 让服务端返回200,不然，默认会返回204
      formData.append('success_action_status', '200')
      // 根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
      formData.append('callback', params.callback)
      formData.append('signature', params.signature)
      formData.append('name', filename)
      // 需要上传的文件filer
      formData.append('file', params.file, filename)
      return formData
    },
    upload({commit}, {url, data}) { // 上传文件
      return new Promise((resolve, reject) => {
        axios.post(url, data, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
          .then((res) => {
            resolve(res)
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    delFile({commit}, params) { // 删除文件
      return new Promise((resolve, reject) => {
        $apis.removeOssFile(params)//封装的删除文件的方法
          .then((res) => {
            resolve(res)
          })
          .catch((err) => {
            reject(err)
          })
      })
    }
  }
}

二、功能调用

这里使用的是Vue框架Element UI中的<el-upload>组件

     <el-form-item label="正面" prop="front">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :http-request="upload1">
          <img v-if="dialogImageUrl" :src="$store.state.constant.aliHomeURLPath + dialogImageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

     async beforeUpload(content) {//因为有两个方法使用到此部分，所以提出来一个方法
        if (content.file.type.split('/')[0] !== 'image') {
          this.$message.error({
            message: '请上传图片格式文件',
          })
          return false
        }
        let params = await this.$store.dispatch('getAllOss').then(res => {//使用了Vuex
          return res.data
        })
        params.file = content.file
        let data = await this.$store.dispatch('setParams', params)
        let url = params.host
        return this.$store.dispatch('upload', {url, data}).then(res => {
          return res;
        })
      },
      upload1(content) {//上传图片的方法
        this.beforeUpload(content).then(res => {
          let filename = res.filename;
          this.dialogImageUrl = filename;
          this.form.billFront = filename;
          this.$refs['form'].validateField('billFront')
        })
      },