前端OSS直传

如果上传图片或视频使用后端的接口,要经历文件解析,文件发送后端,后端文件上传服务器,前端页面就会导致卡顿,甚至直接崩掉,

以阿里云为例,推出由前端直接上传到服务器

官方文档啥的我就不一一解读一遍了,直接上干货!!

需求:上传多选图片,最多9张,每张不超过20M

以图片上传为例,首先获取服务器签名钥匙数据,本人建议由后端给接口动态生成,设置N秒请求数据不一样,跟验证码一样,比较安全,如下:

 点击文件上传


export default {
	name: "updateFile",
    data:{
    return {
		sendImgData:[],  // 存储选中的文件
    },

    methods:{
        /**
         * @函数描述: 点击文件添加到输入框
         * @param type  上传图片还是视频 1:文本 2:图片 3:视频
         * @param event 点击事件
         */
        selectUpdate(type,event){
          console.log(type,event)
          let commentUpload = type === 2 ? this.$refs.commentUploadImages : this.$refs.commentUploadVideo

          if(type === 2){
            let files = event.target.files
            let request = getStsToken_img()  // 获取指令密钥的请求
            if(files.length > 9){
              this.$message.warning("一次最多只能选择9张图片");
              // 清空文件列表
              event.target.value = "";
              return false
            }
            let sizeFilesList = []

            request.then(req => {
              for(var i = 0; i < files.length; i++) {
                sizeFilesList.push(files[i].size)
                if(sizeFilesList.some(item => item / 1024 / 1024 > 20)){
                  this.$message.warning('只允许上传20M内的图片')
                  commentUpload.value = "";
                  return false;
                }
                let data = req.data.data
                let formKey = data.dir + this.randomString(12) + `-${files[i].name}`  // randomString  封装的函数,常见工具函数的文章有描述
                let formData = new FormData();
                formData.append('OSSAccessKeyId', data.accessid)
                formData.append('policy', data.policy)
                formData.append('Signature', data.signature)
                formData.append('key', formKey)
                formData.append('host', data.host)
                formData.append('dir', data.dir)
                formData.append("file", files[i]);

                const xhr = new XMLHttpRequest();

                xhr.open('post', data.host);

                let obj = {
                  sendFileUrl:ossUrl + formKey,  // ossUrl:服务器存储的地址
                  sendFormName: files[i].name
                }

                this.sendImgData.push(obj)
                xhr.send(formData);
              }

              commentUpload.value = "";
            })

          }else {
          //   上传视频部分
          }
        }
   }
}

formData的传递数据,可能根据版本不一样或需求,而有所不同,具体以实际为准

 代码持续更新中,欢迎留言一起探讨!!

 相关文章推荐:项目中常用的工具函数(一)

 聊天评论时自定义mention(@)与插入表情功能

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值