vue 前端阿里云alioss直传文件

最新推荐文章于 2024-08-26 09:17:12 发布

拾一九

最新推荐文章于 2024-08-26 09:17:12 发布

阅读量1.1k

点赞数 1

分类专栏： elementUi vue开发学习 js 文章标签：前端 vue.js 阿里云

本文链接：https://blog.csdn.net/DarlingYL/article/details/130562603

版权

vue开发学习同时被 3 个专栏收录

31 篇文章 2 订阅

订阅专栏

elementUi

18 篇文章 1 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

文章介绍了在Vue项目中，如何实现阿里云OSS的图片上传功能，包括前端的js-md5和axios插件的使用，以及后端返回的阿里云配置信息在前端签名直传过程中的作用。同时，详细展示了前端上传组件的配置和文件处理方法。

摘要由CSDN通过智能技术生成

一、无需安装阿里云插件

1、后端需要返回阿里云的配置信息

2、前端vue代码实现

需要安装js-md5、axios插件

<el-upload
  class="upload"
  ref="upload"
  action=""
  :on-change="upload"
  accept="image/png, image/jpeg, image/jpg"
  :show-file-list="false"
  :auto-upload="false"
>
</el-upload>
<img :src="imgUrl">


import axios from 'axios'
import md5 from 'js-md5'

data() {
	return {
		imgUrl: ''
	}
},
methods: {
	// 选择文件
    upload(file) {
      console.log('file--', file);
      const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
      const isLt3M = file.raw.size / 1024 / 1024 < 3
      if (!isIMAGE) {
        this.showToast('请选择 jpg、png 格式的图片')
        return false
      }
      if (!isLt3M) {
        this.showToast('图片大小不能超过 3MB')
        return false
      }
      const path = this.aliossConfig.dir + this.genPath(file)
      this.aliOssUpload(this.aliossConfig, file, path).then(res => {
        console.log('阿里云直传结果--', res);
        if (res.path) {
          this.imgUrl = res.path
        } else {
          this.$message.error('头像上传阿里云失败，请联系工作人员')
        }
      })
    },
    /** 阿里云直传 */
    async aliOssUpload(config, file, path, process) {
      // config：阿里云配置信息，path：文件名
      let form = new FormData()
      form.append('key', path)
      form.append('OSSAccessKeyId', config.accessKey)
      form.append('policy', config.policy)
      form.append('signature', config.sign)
      form.append('file', file)
      const res = await axios({
        url: config.upload_domain,
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data',
          'Content-Disposition': 'attachment;filename='+ encodeURIComponent(file.name),
        },
        onUploadProgress: function (progressEvent) {
          if(progressEvent.lengthComputable) {
            let rate = progressEvent.loaded / progressEvent.total * 100
            rate = rate.toFixed(3)
            rate = parseFloat(rate)
            process && process(rate,progressEvent.loaded,progressEvent.total)
          }
        },
        withCredentials:false,
        data: form,
      })
      let domain = config.domain.replace(/\/$/,'')
      return {path: `${domain}/${path}`}
    },
    /** 文件名加密、随机数处理 */
    genPath(file) {
      let ext = file.name.match(/\.[^\.]+$/) || ''
      if(ext) {
        ext = ext[0]
      }
      let filename = md5((Math.random() * 10000000) + '') + ext
      return filename
    },
}