アップロードしたファイルのサムネイルテンプレートを一度記録し、アップロードしたファイルの形式、手書き拡大表示、削除方法を区別してエコーしてコンポーネントにカプセル化するという比較的大まかな作業です。
フォトウォール
属性を使用して list-type
ファイルのリストのスタイルを設定します。
ただし、動画をアップロードする際にエコー画像が見つからないので書き換えてコンポーネントにパッケージ化する
コンポーネントに新しい vue ページを作成する
<template>
<div>
<el-upload
:limit="limit"
:action="uploadImgUrl"
:file-list="UrlList"
list-type="picture-card"
:on-change="handleImgChange"
:on-success="handleUploadSuccess"
:on-exceed="handleExceed"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img
v-if="file.type == 1"
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<video v-if="file.type == 2" :src="file.url" style="width: 100%">
您的浏览器不支持 video 标签。
</video>
<audio
controls
v-if="file.type == 3"
:src="file.url"
style="width: 100%"
>
您的浏览器不支持该音频格式。
</audio>
<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
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleImgRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" width="50%">
<img
v-if="dialogType == 1"
class="el-upload-list__item-thumbnail"
width="100%"
:src="dialogImageUrl"
alt=""
/>
<video
v-if="dialogType == 2"
style="width: 100%"
:src="dialogImageUrl"
controls
autoplay
>
您的浏览器不支持 video 标签。
</video>
<audio controls v-if="dialogType == 3">
<source :src="dialogImageUrl" />
您的浏览器不支持该音频格式。
</audio>
</el-dialog>
</div>
</template>
メソッドは Emit でリッスンします
<script>
import bus from "../../utils/bus";
export default {
props: {
// imageUrlList: {
// type: Array,
// default: () => [],
// },
doBySelf: {
type: Boolean,
default() {
return false;
},
},
},
data() {
return {
limit: 3, //限制上传数量
uploadImgUrl: process.env.VUE_APP_WEB_URL + "", // 上传的图片服务器地址
dialogImageUrl: null,
dialogVisible: false,
UrlList: [],
disabled: false,
dialogType: null,
};
},
methods: {
//上传
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogType = file.type;
this.dialogVisible = true;
},
// 图片改变
handleImgChange(file, fileList) {
bus.$emit("changeFileAfterList", fileList);
this.UrlList = fileList;
},
// 图片移除
handleImgRemove(file, fileList) {
fileList = this.UrlList;
let index = fileList.indexOf(file);
fileList.splice(index, 1);
bus.$emit("changeFileAfterList", fileList);
},
//图片上传成功
handleUploadSuccess(response, file, fileList) {
file.type = this.matchType(file.response.data.url);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
files.length + fileList.length
} 个文件`
);
},
// 根据文件名后缀区分 文件类型
/*
* @param: fileName - 文件名称
* @param: 数据返回 1) 无后缀匹配 - false
* @param: 数据返回 2) 匹配图片 - image
* @param: 数据返回 8) 匹配 视频 - video
* @param: 数据返回 9) 匹配 音频 - radio
* @param: 数据返回 10) 其他匹配项 - other
*/
matchType(fileName) {
// 后缀获取
var suffix = "";
// 获取类型结果
var result = "";
try {
var flieArr = fileName.split(".");
suffix = flieArr[flieArr.length - 1];
} catch (err) {
suffix = "";
}
// fileName无后缀返回 false
if (!suffix) {
result = false;
return result;
}
// 图片格式
var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
// 进行图片匹配
result = imglist.some(function (item) {
return item == suffix;
});
if (result) {
result = "1";
return result;
}
// 匹配 视频
var videolist = ["mp4", "m2v", "mkv"];
result = videolist.some(function (item) {
return item == suffix;
});
if (result) {
result = "2";
return result;
}
// 匹配 音频
var radiolist = ["mp3", "wav", "wmv", "flac"];
result = radiolist.some(function (item) {
return item == suffix;
});
if (result) {
result = "3";
return result;
}
// 其他 文件类型
result = "other";
return result;
},
},
};
</script>
親ページで呼び出される
<FileUploadEdit ref="UrlList"></FileUploadEdit>
import FileUploadEdit from "@/components/FileUploadEdit";
components: {
FileUploadEdit,
},
親ページはデータの変更を監視し、created()メソッドに書き込まれます。
bus.$on("changeFileList", (fileList) => {
this.ruleForm.imageUrlList = [];
this.ruleForm.videoUrlList = [];
this.ruleForm.musicUrlList = [];
if (fileList.length > 0) {
fileList.map((item) => {
if (item.response) {
if (fileUploadIf(item.response.data.url) == 1) {
this.ruleForm.imageUrlList.push(item.response.data.url);
} else if (fileUploadIf(item.response.data.url) == 2) {
this.ruleForm.videoUrlList.push(item.response.data.url);
} else if (fileUploadIf(item.response.data.url) == 3) {
this.ruleForm.musicUrlList.push(item.response.data.url);
}
}
});
}
});
上記はアップロードしたファイルを書き換えるためのパッケージです。