element ui 上传图片 el-upload的使用

骑猪看日落 2021-07-25 13:24 553阅读 0赞

el-upload图片上传的使用  
知识点：  
1.http-request：图片上传的处理函数  
2.on-remove:图片移除时的处理函数  
3.根据文件获取文件的扩展名  
4.根据当前时间，对文件进行重命名  
此处的$moment是一个日期转化格式的插件，具体链接如下：  
[moment.js中文网][moment.js]  
简单使用的参照链接：[moment.js简单使用的参照链接][moment.js 1]  
5.移除图片时，通过Object.keys将对象所有可枚举的属性组合成数组，然后通过for循环遍历的形式，将文件查找出来，进行delete,delete操作符，是用于删除对象中某个属性的。

//以下代码是el-form中的一部分
    //label标签，如果内容是字符串，可以不用绑定的形式，可以改为 `lable="商品图片"`
    //prop是属性值为medias，如果有图片更新，则更改的是medias的内容
    <el-form-item :label="'商品图片'" prop="medias">
    	//action
    	//accept:能够接收的图片扩展名
    	//multiple:是否多选
    	//http-request:成功后的处理函数
    	//on-remove:移除图片的操作函数
    	//file-list:展示的图片列表
    	//list-type:展示的样式是卡片样式
    	<el-upload action="#" accept="gif,bmp,jpg,jpeg,png" :multiple="true" :http-request="handleUpload"
        :on-remove="handleRemove" :file-list="medias" list-type="picture-card">
        //中间图标为+
    	    <i class="el-icon-plus" />
    	    //提示信息为插槽。slot="tip"
    	    <div slot="tip" class="el-upload__tip">上传文件不超过2M</div>
      </el-upload>
    </el-form-item>
    
    //对应的处理函数
    //选择图片后的函数
    //async 异步处理函数
     async handleUpload(val) { 
     		//以下两行貌似没有用处
            const that = this;
            that.disabled = true;
            // 获取OSS配置信息，这个不是很懂，据说是固定写法
            const {  result } = await getOssToken();
            const client = new OSS({ 
              region: that.oss.region,
              accessKeyId: result.AccessKeyId,
              accessKeySecret: result.AccessKeySecret,
              stsToken: result.SecurityToken,
              bucket: that.oss.bucket,
              secure: true
            });
            //val中有多个参数，file是上传的文件
            const file = val.file;
            //获取文件名称的最后一个. 可以通过这个方式获取文件扩展名
            const point = file.name.lastIndexOf(".");
    		//substr(start,length),字符串的方法，可以截取从start索引开始之后的length长度的字符。如果不写，则截取到最后一位
            const suffix = file.name.substr(point);
            //此处的$moment是一个日期转化格式的插件，具体链接如下：
            [moment.js中文网](http://momentjs.cn/docs/#/parsing/)
            //简单使用的参照链接：[moment.js简单使用的参照链接](https://www.jianshu.com/p/33d55772208b)
            //格式转化为年月日
            const date = that.$moment().format("YYYY-MM-DD");
            //获取当前时间戳
            const times = that.$moment().valueOf();
            //定义文件名称为 时间戳+扩展名
            const fileName = `${ times}${ suffix}`;
            //oss配置中添加此文件，文件路径为 item/当前日期年月日/文件名，文件为file,如果配置成功，则可以往图片列表medias中写入。
            client.put(`item/${ date}/${ fileName}`, file).then((val) => { 
              console.info(val);
              if (val.res.statusCode === 200) { 
                that.medias.push({  name: val.name, url: val.url });
              } else { 
                console.error(val);
              }
            }, err => { 
              console.error(err);
            });
          },
          //移除图片的方法
          handleRemove(file) { 
          	//图片的唯一标识是file.uid
            const uid = file.uid;
            //Object.keys 可以将对象的属性都拿出来，形成一个数组进行返回。
            const objKeyArr = Object.keys(this.medias);
            //for循环遍历数组，如果对象中某个属性的uid跟目前Uid相同，则进行移除。
            for (let i = 0, len = objKeyArr.length; i < len; i++) { 
              if (this.medias[objKeyArr[i]].uid === uid) { 
                delete this.medias[objKeyArr[i]];
                return;
              }
            }
          }

[moment.js]: http://momentjs.cn/docs/#/parsing/
[moment.js 1]: https://www.jianshu.com/p/33d55772208b