Vue2 + element-ui アップロードは、画像以外のファイルをアップロードしてカスタム アイコンを表示します
提示：这里是配合jQuery进行使用的，因为要修改dom，img的src，如没有安装jQuery请自行安装。
アプリケーション シナリオ: 新規提出および編集エコー提出シナリオを含む、例で使用されるアップロード リスト エコー モードはフォト ウォール モード: list-type="picture-card" であり、効果画像は下部にあります。
1. 新しいシーン
説明: 新しいシーンは、編集中にファイルと画像のエコー操作を考慮する必要はなく、アップロード後のアイコンの置換のみが成功します。
コードは次のとおりです (例)。
1.html コード
<el-upload class="upload-demo" ref="upload" :action="'替换为你的上传地址'"
:data="{token: '如果需要token，替换为你的token，当然也可以新增其他参数'}"
:on-success="handleSuccess" list-type="picture-card"
>
// 上传icon
<i class="el-icon-plus"></i>
//插槽，自定义鼠标经过显示的按钮
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
//预览操作
<span
class="el-upload-list__item-preview"
@click="handlePvew(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
//删除操作
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
2. js コード (dom と img の src を変更する必要があるため、ここでは jq を使用します)
//上传成功
handleSuccess(res,file,fileList){
this.$nextTick(() => {
$('.el-upload-list__item').each((index)=>{
//这里是根据文件名称来获取后缀名
let fix = fileList[index].name.split('.').pop()
if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
// 如果是图片文件则不做处理
return
} else{
$(`.el-upload-list__item-thumbnail:eq(${
index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
// 这里也可以用本地图片 require('@/assets/fire/WORD.png')
}
});
})
},
//预览文件预览
handlePvew(file){
//拿到当前点击的文件，根据自己需求实现
},
//删除当前文件
handleRemove(file){
let index = this.$refs.upload.uploadFiles.indexOf(file)
this.$refs.upload.uploadFiles.splice(index, 1)
},
//提交时获取上传文件列表
submit() {
//这里拿到所有回显的文件列表，并处理成逗号拼接字符串
this.form.files = this.$refs.upload.uploadFiles.map(elem=>{
//我这里是使用的阿里oss上传，根据自己上传层级来
return elem.response.code.fullurl
}).join(',')
//后续提交代码
...
}
2.シーンを編集する
コードは次のとおりです (例)。
1. data に fileList 変数を定義する
data() {
return {
fileList: []
}
}
2. 追加と同じですが、エコー用に新しいファイル リスト パラメータが追加されます。
<el-upload class="upload-demo" ref="upload" :action="'替换为你的上传地址'"
:data="{token: '如果需要token，替换为你的token，当然也可以新增其他参数'}"
:on-success="handleSuccess" :file-list="fileList" list-type="picture-card"
>
// 上传icon
<i class="el-icon-plus"></i>
//插槽，自定义鼠标经过显示的按钮
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
//预览操作
<span
class="el-upload-list__item-preview"
@click="handlePvew(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
//删除操作
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
3.js コード
コードは次のとおりです (例)。
// 请求数据详情接口，这里我把请求代码省略了，res.data.files就是请求来的文件数据
getDetail(){
//请求成功后，拿到新增上传的files文件，因为新增时转成逗号拼接的字符串了，这里要再转成数组
this.fileList = res.data.files.split(',').map(elem=>{
return {
url: elem
}
})
// dom回显成功后，替换回显图标，和新增那块代码一样
this.$nextTick(() => {
$('.el-upload-list__item').each((index)=>{
//这里是根据文件路径来获取后缀名
let fix = this.$refs.upload.uploadFiles[index].url.split('.').pop()
if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
// 如果是图片文件则不做处理
return
} else{
$(`.el-upload-list__item-thumbnail:eq(${
index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
// 这里也可以用本地图片 require('@/assets/fire/WORD.png')
}
});
})
},
// 上传成功
handleSuccess(res,file,fileList){
// 这里需要处理fileList数组，因为回显时赋值的那个fileList里的url和新上传的fileList里的url层级不同
let arr = fileList.map(elem=>{
if(elem.response){
return {
url: elem.response.code.fullurl
}
}else{
return {
url: elem.url
}
}
})
this.$nextTick(() => {
$('.el-upload-list__item').each((index)=>{
//这里使用的是arr，使用文件路径来获取后缀名
let fix = arr[index].url.split('.').pop()
if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
// 如果是图片文件则不做处理
} else{
$(`.el-upload-list__item-thumbnail:eq(${
index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
// 这里也可以用本地图片 require('@/assets/fire/WORD.png')
}
});
})
},
// 提交操作
submit() {
//同上，回显的fileList里的url和新上传的fileList里的url层级不同
let arr = this.$refs.upload.uploadFiles.map(elem=>{
if(elem.response){
return elem.response.code.fullurl
}else{
return elem.url
}
})
this.form.files = arr.join(',')
//后续提交代码
...
},
提示：预览和删除操作，与新增场景一致。
レンダリング
Vue2 + jQuery + element-ui のアップロードで画像以外のファイルをアップロードして、カスタム アイコンの詳細なチュートリアルを表示します。
1. 新しいシーンを追加
2.シーンを編集する
3.シーンをプレビューする
