vue图片/文件上传

vue上传图片/文件的方式：

vue上传图片有两种：服务器直传和图片接口上传
注意：上传文件（图片除外）必须是config.headers = { ‘Content-Type’: ‘multipart/form-data’ };

一、服务器直传（阿里云，需要后端配合）：

1. 文件/图片直传接收步骤

首先服务器直传需要哪些信息：
需要信息1.阿里云上传参数；2.上传文件；3.上传路径。
阿里云文档信息
地址: 阿里云上传文件地址.

1.2vue阿里云上传文件
获取上传地址

首先我这边将阿里云的上传文件包放置静态文件中

1.2上传文件/图片的阿里云参数：

2. 上传文件

1.准备好，接下来就是上传文件了

//OSSUpload是通过public中引入阿里云SDK使用
//param是上传的文件path是上传文件路径getAliYunAuthInfo是获取阿里云信息接口imgUrl是阿里云返回的文件链接
export function uploadXlsx(param, path) {
  return new Promise(async (resolve, reject) => {
    let data = await getAliYunAuthInfo();
    if (data.code == 200) {
      let OSSConfig = data.data;
      let imgUrl = await OSSUpload(OSSConfig, param, path);
      resolve(imgUrl)
    } else {
      Message({
        message: data.msg,
        type: 'error'
      })
      reject(err);
      return false;
    };
  });
};

2.准备好，接下来就是上传图片了

//fig:接口获取的阿里云信息 sresize64:图片文件 path:上传的服务器路径count：上传图片数量
var count = 0;
export function OSSUpload(figs, resize64, path) {
  return new Promise((resolve, reject) => {
    let file = resize64;
    let OSS = require('ali-oss');
    let https = location.origin;
    let httpsIndexOf = https.indexOf('正式域名') > -1;
    let client = new OSS({
      region: 'oss-cn-hangzhou',
      accessKeyId: figs.AccessKeyId,
      accessKeySecret: figs.AccessKeySecret,
      stsToken: figs.SecurityToken,
      bucket: httpsIndexOf ? '上传地址' : '上传地址'  //测试域名
    });
    let postUrl = '地址名' + '/' + path + '/' + Date.now() + '-地址名-' + file.name;
    client.put(postUrl, file).then((res) => {
      resolve(res)
    }).catch((err) => {
      if (err.status === 403) {
        count += 1;
        if (count > 8) {
          Vue.prototype.$message.error('上传异常，请联系管理员');
          reject(err);
          return false;
        } else {
          OSSUpload(figs, resize64, path)
        }
      }
    })
  })
}

二、接口上传：

1.文件直接通过上传接口就可以了；
2.图片需要处理的（压缩等）：

//width = 1250, //图像大小 quality = 0.8, //图像质量来压缩
export function uploadImg(param, path) {
  return new Promise((resolve, reject) => {
    var imgtype = param.type;
    let reader = new FileReader();
    var img = new Image;
    reader.readAsDataURL(param);
    reader.onloadend = function () {
      var newBase64 = '';
      var width = 1250, //图像大小
          quality = 0.8, //图像质量
          ratio = 1.2,
          canvas = document.createElement("canvas"),
          drawer = canvas.getContext("2d");
      img.src = this.result;
      img.onload = async function () {
        canvas.style.width = canvas.width;
        canvas.style.height = canvas.height;
        canvas.width = width * ratio;
        canvas.height = (width * (img.height / img.width)) * ratio;     
        drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
        newBase64 = canvas.toDataURL("image/png", quality);
        var arr = newBase64.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        var NewName = 'card.' + imgtype.split('/')[1];
        var resize64 = new File([u8arr], NewName, { type: mime }); //得到formData
        let params = new FormData()
        if(param.size > 1024 * 1024 * 2){
          params.append("file", resize64)
        }else{
          params.append("file", param)
        }
        params.append("type", 2)
        params.append("mkdir", path)
        let imgUrls = await uploadsImg(params)
        let imgUrl = []
        if (imgUrls.code == '200') {
          if (imgUrl) {
            //返回信息处理
          }
          resolve(imgUrl)
        } else {
          Message({
            message: data.msg,
            type: 'error'
          })
          reject(err);
          return false;
        };
      };
    }
  });
}

---

欢迎点赞收藏

---