vue(element-ui)使用oss上传文件，用scoped-slot去设置缩略图模版

vue(element-ui)使用oss上传文件，用scoped-slot去设置缩略图模版

oss上传文件

注意：使用oss上传文件到阿里云服务器，首先要到阿里云服务器配置一些请求头和请求方式，否则在pc端上传文件会存在跨域的现象

import OSS from 'ali-oss';

let client = new OSS({
	    accessKeyId: '******************',
	    accessKeySecret: '******************',
	    bucket: '******************',
});
 client.multipartUpload('目录/自定义文件名`, file.file, {
       progress: (percent) => {
       			//文件上传的进度
                 file.onProgress({ percent: Math.floor(percent * 100) });
               }
       })
       .then((res) => {
                //根据实际情况进行处理
         });

用scoped-slot去设置缩略图模版

 <el-upload
          action="#"
          list-type="picture-card"
          :before-upload="beforeUpload"
          http-request="(file) => httpRequest(file)"
          :file-list="fileList"
         >
           <i slot="default" class="el-icon-plus"></i>
           <div slot="file" slot-scope="{ file }">
               <el-progress v-if="file.percentage" type="circle" :percentage="file.percentage"></el-progress>
               <div v-else>
                    <img class="el-upload-list__item-thumbnail" :src="file | filterFile" alt="" />
                    <label class="el-upload-list__item-status-label">
                     	<i class="el-icon-upload-success el-icon-check"></i>
                    </label>
                    <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                           </span>
                           <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                                    <i class="el-icon-download"></i>
                            </span>
                            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                             </span>
                            </span>
                   </div>
             </div>
  </el-upload>