根据Element - upload 组件实现文件上传直传阿里云 OSS前端部分

爱吃。。所有肉

已于 2022-07-26 13:18:49 修改

阅读量760

点赞数 2

文章标签：前端阿里云 elementui

于 2022-07-26 12:36:43 首次发布

本文链接：https://blog.csdn.net/weixin_44614177/article/details/125992136

版权

本文档展示了如何使用阿里云OSS服务进行图片上传，通过前端交互实现商品图片的上传流程。首先获取OSS签名，然后在前端进行主图、详情图和缩略图的上传操作，包括图片格式和大小的验证，以及上传成功后的图片路径设置。代码中详细解释了每个步骤，包括before-upload、on-success等关键方法。

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


<template>
  <div>
    <el-form>         
       <el-row> 
         <el-col :span="24">
             <el-form-item label="商品主图：">
                <img :src="man_page_up" alt="" class="uploadImg"> 
<!-- bucket地址,是后端配置，一般格式为 https://你的bucket名称.你的bucket地域.aliyuncs.com  -->
                <el-upload  style="float:left;"  class="avatar-uploader" :data="pageUpObj" action='bucket地址' :show-file-list="false" :on-success="uploadSuccessMasterImg" :before-upload="beforeUploadMasterImg">
                <el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334" :disabled="canEdit">上传图片</el-button>
                </el-upload>
                <p class="goodtips">商品详情页主图，最多上传1张，建议长宽为420*750像素，300KB以内</p>
             </el-form-item>
         </el-col>
         <el-col :span="24">
             <el-form-item label="详情图：">
                 <img :src="man_page_down" alt="" class="uploadImg">
                 <el-upload  style="float:left;"  class="avatar-uploader" :data="pageDownObj" action='bucket地址' :show-file-list="false" :on-success="uploadSuccessDetailImg" :before-upload="beforeUploadDetailImg">
                 <el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334" >上传图片</el-button>
                 </el-upload>
                 <p class="goodtips">商品详情页详情图，最多上传1张，建议宽750像素，800KB以内</p>
             </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="缩略图：" >
                  <img :src="man_page_order" alt="" class="uploadImg">
                  <el-upload  style="float:left;"  class="avatar-uploader" :data="pageOrderObj" action='bucket地址' :show-file-list="false" :on-success="uploadSuccessBreviaryImg" :before-upload="beforeUploadBreviaryImg">
                 <el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334">上传图片</el-button>
                 </el-upload>
                 <p class="goodtips">下单缩略图，最多上传1张，建议长宽为160*160像素</p>
              </el-form-item>
         </el-col>
      </el-row>
   </el-form>
 </div>
</template>

    data() {
        return {
            pageUpObj:{},
            pageDownObj:{},
            pageOrderObj:{},
            man_page_up: '',
            man_page_down: '',
            man_page_order: '',
        }
   }

其实和正常的上传流程是一样的，只不过是需要先拿到oss签名，再进行上传

getOssInfo是后端写的获取oss签名的接口，返回数据格式大概如下：

      methods: {　
        async beforeUploadMasterImg(file) {
            await this.getOssSignature(file,'up')
        },
        async beforeUploadDetailImg(file) {
           await this.getOssSignature(file,'down')
        },
        async beforeUploadBreviaryImg(file) { 
           await this.getOssSignature(file,'order')
        },
        /**
         * oss上传图片  服务端签名直传-获取签名
         *
         * @return
         */
        async getOssSignature(file,type){
            var _self=this
             // 因为向后端请求getOssInfo是异步的，我们这里同步处理就加上async  同步处理加上 await
            await getOssInfo().then(response=>{
                if(type=='up' && _self.beforeImgUpload(file, 300 / 1024)){
                    console.log(_self.beforeImgUpload(file, 300 / 1024),'你你你你你你你');
                    _self.pageUpObj.policy = response.data.policy //policy
                    _self.pageUpObj.signature = response.data.signature //签名
                    _self.pageUpObj.ossaccessKeyId = response.data.accessid //accessKeyId
                    _self.pageUpObj.key = response.data.dir +  file.uid + '_' + file.name // 图片链接
                    _self.pageUpObj.dir = response.data.dir  //存储在oss的文件路径
                    _self.pageUpObj.host = response.data.host //这个其实就是oss的地址，也就是组件上传中需要的action             
                }
                if(type=='down' &&  _self.beforeImgUpload(file, 800 / 1024)){
                    _self.pageDownObj.policy = response.data.policy
                    _self.pageDownObj.signature = response.data.signature
                    _self.pageDownObj.ossaccessKeyId = response.data.accessid
                    _self.pageDownObj.key = response.data.dir +  file.uid + '_' + file.name
                    _self.pageDownObj.dir = response.data.dir
                    _self.pageDownObj.host = response.data.host
                }
                if(type=='order' && _self.beforeImgUpload(file)){
                    _self.pageOrderObj.policy = response.data.policy
                    _self.pageOrderObj.signature = response.data.signature
                    _self.pageOrderObj.ossaccessKeyId = response.data.accessid
                    _self.pageOrderObj.key = response.data.dir +  file.uid + '_' + file.name
                    _self.pageOrderObj.dir = response.data.dir
                    _self.pageOrderObj.host = response.data.host
                }               
            })
        },
        /**
         * 图片上传前 钩子函数
         *
         * @param {Object} file 图片详细信息
         * @param {Number} limitFileSize 图片大小限制 单位MB
         * @return
         */
        beforeImgUpload(file, limitFileSize = 10) {
            console.log(file)
            const isJPG = file.type === "image/jpeg";
            const isPNG = file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < limitFileSize;
            if (!isJPG && !isPNG) {
                this.$message.error("上传图片只能是 JPG、JPEG、PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error(`上传图片大小不能超过 ${limitFileSize}MB!`);
            }
            return isJPG || (isPNG && isLt2M);
        },
        /**
         * 图片上传成功 钩子函数
         *
         * @param
         * @return
         */
        uploadSuccessMasterImg(res,file) {
            this.man_page_up = this.pageUpObj.host + '/' + this.pageUpObj.key
        },
        uploadSuccessDetailImg(res) {
            this.man_page_down = this.pageDownObj.host + '/' + this.pageDownObj.key
        },        
        uploadSuccessBreviaryImg(res) {
            this.man_page_order = this.pageOrderObj.host + '/' + this.pageOrderObj.key
        },
    }

效果图：