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: '******************',acces
·
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>
更多推荐



所有评论(0)