vue项目中上传文件至阿里云

先前准备：

axios、jquery、uuid使用npm安装

1.采用elementui的上传插件，注意两点，action置为空，http-request覆盖默认的上传行为

<el-upload
  class="avatar-uploader"
  action=""
  :http-request='httpRequest'
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <img :src="formData.icon" alt class="fill" v-else/>
</el-upload>

2.上传文件前设置和覆盖默认的上传行为

// 上传文件之前的钩子
beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isPNG = file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if(!(isJPG || isPNG)){
	this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
  }
  if (!isLt2M) {
	this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return (isJPG || isPNG) && isLt2M;
},
// 覆盖elemen的上传函数
async httpRequest(item){
  let result = await upload(item)
  console.log(result)

},

3.封装上传函数，使用Promise对象

import axios from 'axios'
import { BASE_URL } from './index'
import * as $ from 'jquery';
import UUID from 'uuid';

// upload
export const upload = (item) => {
  return new Promise((resolve, reject) => {
    let ossTokenData = {}
    getOssToken().then(res => {
      if (res.data.code === 200) {
        // oss返回数据
        ossTokenData = res.data.data
        console.log(ossTokenData)
        console.log(item)
        // 上传文件名称
        let filename = item.file.uid + item.file.name
        console.log(filename)
        let formData = new FormData();
        const key = ossTokenData.dir + UUID.v4().toString().replace(/-/g, '') + '.png';
        //注意formData里append添加的键的大小写
        formData.append('name', item.file.name);
        formData.append('key', key); //存储在oss的文件路径
        formData.append('OSSAccessKeyId', ossTokenData.accessKeyId); //accessKeyId
        formData.append('policy', ossTokenData.policy); //policy
        formData.append('signature', ossTokenData.signature); //签名
        //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
        formData.append("file", item.file);
        formData.append('success_action_status', '200'); //成功后返回的操作码
        let url = ossTokenData.host
        let fileUrl = ossTokenData.host + '/' + ossTokenData.dir + filename;
        $.ajax({
          url: url,
          type: 'POST',
          data: formData,
          // async: false,
          cache: false,
          contentType: false,// 必须false才会自动加上正确的Content-Type
          processData: false,// 必须false才会避开jQuery对 formdata 的默认处理
          crossDomain: true,
          success: function (data) {
            console.log(fileUrl);
            console.log(data);
            resolve(data)
          },
          error: function (data) {
            console.log(data);
            reject(data)
          }
        });

      }

    })
  })


}
//获取上传通行证
const getOssToken = params =>
  axios({
    url: BASE_URL + '/common/policy',
    method: 'GET',
    headers: {
      'Authorization': sessionStorage.getItem("tokenHead") + ' ' + sessionStorage.getItem("token")
    },
    params
  })

注意：通行证和ajax请求参数如图

                                   图一： 通行证示例

       图二：ajax请求参数示例