vue axios上传图片 vue上传图片到oss

     在项目需求中，关于图片、视频、文件等上传文件，一般不是直接放置在自己的后台服务器上，一般都会购买云服务进行存储。譬如阿里云的oss对象存储。

     前端开发项目中，涉及到上传的功能时，我们不是把文件上传到自己的后台服务器，而是阿里云上面去，然后拿到文件的访问地址，例如图片的地址，再传递给后台保存下来，保存的是一个阿里云存储地址。

        官方文档上说了：（阿里云oss文档地址：https://help.aliyun.com/document_detail/112718.html）
        1、使用阿里云上传的SDK来上传到阿里云oss
        2、不使用sdk的方式，直接使用post表单提交到阿里云oss去
        3、小程序（忽略）

        其实，也就两种。要么使用阿里云给的sdk，他封装的上传方法等；要么使用表单提交，像提交到我们自己服务器一样。

 

        

    阿里云oss SDK上传: https://help.aliyun.com/document_detail/64047.htm?spm=a2c4g.11186623.0.0.119f3967Xq1Eb8#concept-64047-zh

         这种方式，需要安装依赖包或引入js文件:   npm install ali-oss

         新建oss.js文件，封装一下 ：

const OSS = require('ali-oss')
export default {
/**
 * 阿里云oss sdk文件上传
  dir 上传到的文件位置
 * @param {*} file 文件流
 * @param {*} successCallback 成功回调
 * @param {*} errCallBack 失败回调
 * @param {*} bucketName 阿里云桶名（可以指定多个桶名）
 * @param {*} dir 上传文件夹路径  譬如images
 */

 bucketUpload(file, successCallback = new Function(), errCallBack = new Function(), bucketName = 'zzl-filerepostorypublic', dir = 'image') {
  let fileName = file.name// 先获取上传要的资料签名
  req.getUploadVoucher().then((res) => {
    if (res.code === 0) {
      let obj = res.result.filePath.credentials || {}
      let config = {}
      config.host = obj.OssUrl
      // 实例化一个上传客户端
      const client = new OSS({
        // yourRegion填写Bucket所在地域。Region填写为oss-cn-hangzhou。
        // region: "oss-cn-beijing", //我的存储是北京，可根据具体配置自行修改
        region: 'oss-cn-shanghai',
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。）（后台接口返回）
        accessKeyId: obj.accessKeyId,
        accessKeySecret: obj.accessKeySecret,
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: obj.securityToken,
        // 填写Bucket名称。
        bucket: 'zzl-filerepostorypublic',
        endpoint:"https://oss-cn-shanghai.aliyuncs.com"
      })

      try {// 为保证唯一性，可以通过uuid将文件名替换
        // let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))if (dir.substring(dir.length - 1, 1) !== '/') {
          dir += '/'
        }const result = client.put(dir + fileName, file)
        result
          .then(res => {
            console.log(res,"返回文件名和文件地址")
            let size = file.size > 1000000 ? parseFloat(file.size / 1000000).toFixed(2) + 'M' : parseFloat(file.size / 1000).toFixed(2) + 'KB'
            successCallback({
              attachment: fileName,
              aliyunAddress: res.url,
              size: size,
              host: config.host
            })
          })
          .catch(err => {
            errCallBack(err)
          })
      } catch (e) {
        console.log(e)
      }
    } else {
      // _this.$message.warning(res.msg);
    }
  });
}
}

vue 页面的代码：

<el-upload
            class="upload-demo"
            :file-list="fileList1"
            action=""
            :http-request="handleUpload"
            :on-success="handleZipSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              支持扩展名：.ppt、.pdf、.zip、.doc、.docx
            </div>
 </el-upload>

  import common from './oss'

//手动上传的方法  
    handleUpload(op) {
      let bucketName = 'zzl-filerepostorypublic'; // 桶名
      let dir = `images`;
      common.bucketUpload(
        op.file,
        (res) => {
          let temp = {
            name: res.attachment,
            url: res.aliyunAddress
          };
          this.host = res.host;
          op.onSuccess(temp);
          console;
        },
        (err) => {
          console.log(err);
        },
        bucketName,
        dir
      );
    },
//上传成功的方法
    handleZipSuccess(file) {
      this.fileList1 = [];
        this.fileList1.push({
          fileName: file.name, 
          name: file.name 
        });
      console.log(file, '阿里云返回的文件地址和文件名称');
      this.form.fileAddressId = file.url;
      this.form.handoutName = file.name;
      this.form.handoutType = file.name.replace(/.+\./, '');
    },

  页面效果：