【vue】element-ui + OSS 上传图片

阿里云OSS图片上传，前端部分

通过NPM安装ali-oss模块：

npm install ali-oss

自定义文件夹创建oss.js文件：

const OSS = require('ali-oss')

export function client(data) {
    //后端提供数据
    return new OSS({
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessKeySecret,
        stsToken: data.securityToken,
        region: data.region, // oss地区
        bucket: data.bucket
    })
}

element-ui 上传组件：

<el-upload
  action="OSS上传路径，必填"
  list-type="picture-card"
  :before-upload="beforeUpload"
  :http-request="upLoad"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

数据定义：

data() {
  return {
    dialogImageUrl: '',
    dialogVisible: false,
    dataObj: {}, //存签名信息
  }
}

在script标签下导入oss.js，并在methods里写入以下方法：

//导入oss.js文件
import { client } from './../../../tools/oss.js';

//methods
handleRemove(file, fileList) {
  console.log(file, fileList);
},
handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
},
/**
 * [beforeUpload 上传图片前执行获取秘钥]
* @return {[type]} [description]
 */
beforeUpload() {
  return new Promise((resolve, reject) => {
    //从后台获取第一步所需的数据
    //getOssToken 获取OSS秘钥的接口地址
    this.$axios.get(getOssToken, {}).then(response => {
      this.dataObj = response.data
      resolve(true)
    }).catch(err => {
      console.log(err)
      reject(false)
    })
  })
},
/**
* [upLoad 自定义上传图片]
* @param  {[type]} file [上传值]
* @return {[type]}      [description]
*/
upLoad(file) {
  const self = this
  let files = file.file,
      point = files.name.lastIndexOf('.'),
      suffix = files.name.substr(point),
      fileName = files.name.substr(0, point),
      date = Date.parse(new Date()),
      fileNames = `${fileName}_${date}${suffix}`;

  //fileNames上传文件的名称
  //file.file上传文件的内容
  client(this.dataObj).multipartUpload(fileNames, file.file).then(result => {
    //下面是如果对返回结果再进行处理，根据项目需要
    // console.log(result)
    self.$message({
      message: '上传成功',
      type: 'success'
    });
  }).catch(err => {
    self.$message.error('上传失败');
  })
}

可能会遇到跨域的问题：

image.png

如遇此问题，表明本地服务器和阿里云跨域，去阿里云配置即可解决。