前端OSS直传

Kylincsg

已于 2024-04-03 15:37:04 修改

阅读量433

点赞数 8

分类专栏：项目中的疑难解惑文章标签：前端服务器 javascript 开发语言笔记经验分享其他

于 2024-01-23 09:48:31 首次发布

本文链接：https://blog.csdn.net/Kylincsg/article/details/135753831

版权

项目中的疑难解惑专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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

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

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

需求：上传多选图片，最多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 {
          //   上传视频部分
          }
        }
   }
}