element plus实现点击上传于链接上传并且回显到upload组件中

摘要：

今天遇到一个问题：vue3使用elemnt plus的上传图片时，数据是从别人的系统导出来的商品，图片是http的形式的，并且商品很多的，一个一个下载下来再上传很麻烦的，所以本系统插件商品时图片使用http的链接上传的形式上传到自己的服务器!

<template><div class="upload-box"><el-uploadv-model:file-list="fileList":accept="fileType.join(',')":action="uploadUrl":before-upload="beforeUpload":class="['upload', drag ? 'no-border' : '']":disabled="disabled":drag="drag":http-request="httpRequest":limit="limit":multiple="true":on-error="uploadError":on-exceed="handleExceed":on-success="uploadSuccess"list-type="picture-card"><div class="upload-empty"><slot name="empty"><Icon icon="ep:plus" /><!-- <span>请上传图片</span> --></slot></div><template #file="{ file }"><img :src="file.url" class="upload-image" /><div class="upload-handle" @click.stop><div class="handle-icon" @click="handlePictureCardPreview(file)"><Icon icon="ep:zoom-in" /><span>查看</span></div><div v-if="!disabled" class="handle-icon" @click="handleRemove(file)"><Icon icon="ep:delete" /><span>删除</span></div></div></template></el-upload><div class="el-upload__tip"><slot name="tip"></slot></div><el-image-viewer v-if="imgViewVisible" :url-list="[viewImageUrl]" @close="imgViewVisible = false" /><div><el-input v-model="imageUrl" placeholder="请输入图片链接" /><el-button @click="uploadImage">上传</el-button></div></div>
</template><script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';const fileList = ref([]);
const fileType = ref(['image/jpeg', 'image/png']);
const uploadUrl = ref('https://your-upload-url.com');
const drag = ref(false);
const disabled = ref(false);
const limit = ref(5);const imgViewVisible = ref(false);
const viewImageUrl = ref('');
const imageUrl = ref('');const beforeUpload = (file) => {// 自定义文件上传前的处理逻辑return true;
};const httpRequest = (options) => {// 自定义文件上传请求const { file, onProgress, onSuccess, onError } = options;const formData = new FormData();formData.append('file', file);// 发起自定义上传请求fetch(uploadUrl.value, {method: 'POST',body: formData,onUploadProgress: (event) => {onProgress({ percent: (event.loaded / event.total) * 100 });},}).then((response) => response.json()).then((data) => {onSuccess(data);}).catch((error) => {onError(error);});
};const uploadError = (err, file, fileList) => {ElMessage.error('上传失败');
};const handleExceed = (files, fileList) => {ElMessage.warning(`当前限制选择 ${limit.value} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
};const uploadSuccess = (response, file, fileList) => {ElMessage.success('上传成功');
};const handlePictureCardPreview = (file) => {viewImageUrl.value = file.url;imgViewVisible.value = true;
};const handleRemove = (file) => {const index = fileList.value.indexOf(file);if (index > -1) {fileList.value.splice(index, 1);}
};const uploadImage = () => {const imageUrl = imageUrl.value.trim();if (!imageUrl) {ElMessage.error('请输入有效的图片链接');return;}// 创建文件对象const file = {name: 'image.jpg',url: imageUrl,raw: new File([], 'image.jpg', { type: 'image/jpeg' })};// 将文件对象添加到文件列表fileList.value.push(file);// 清空输入框imageUrl.value = '';
};
</script><style scoped>
.upload-box {display: flex;flex-direction: column;align-items: center;
}.upload {width: 300px;
}.no-border {border: none;
}.upload-empty {display: flex;justify-content: center;align-items: center;height: 100%;
}.upload-image {width: 100%;height: 100%;object-fit: cover;
}.upload-handle {display: flex;justify-content: space-around;margin-top: 5px;
}.handle-icon {cursor: pointer;display: flex;align-items: center;
}.handle-icon span {margin-left: 5px;
}
</style>

代码功能解释
文件上传：

• 使用 el-upload 组件实现文件上传，支持拖拽、多选、限制文件数量等功能。
• v-model:file-list 绑定文件列表，:accept 设置允许的文件类型，:action 设置上传接口地址。
• :before-upload、:http-request、:on-error、:on-exceed、:on-success 等属性分别用于文件上传前的处理、自定义上传请求、上传失败、超过文件数量限制、上传成功等事件的处理。

文件预览：

• 上传的图片可以预览，点击图片可以放大查看。
• handlePictureCardPreview 方法用于显示图片预览。

文件删除：

• 上传的图片可以删除，删除操作会触发 handleRemove 方法。

输入图片链接：

• 用户可以通过 el-input 输入图片链接并点击“上传”按钮来上传图片。
• uploadImage 方法将输入的图片链接转换为文件对象，并将其添加到文件列表中。

flowchart TD
A[开始] --> B[用户输入图片链接]
B --> C[点击上传按钮]
C --> D[调用 uploadImage 方法]
D --> E{输入链接是否有效?}
E -->|否| F[提示无效链接]
E -->|是| G[创建文件对象]
G --> H[将文件对象添加到文件列表]
H --> I[更新文件列表]
I --> J[显示上传成功的图片]
J --> K[结束]
F --> K

代码逻辑说明:

1. 输入图片链接：用户在 el-input 输入框中输入图片链接。
2. 点击上传按钮：用户点击“上传”按钮，触发 uploadImage 方法。

处理上传逻辑：

1. 检查输入的链接是否有效。
2. 如果链接无效，提示用户。
3. 如果链接有效，创建文件对象并将文件对象添加到文件列表中。
4. 更新文件列表：文件列表更新后，显示新上传的图片。
5. 通过上述步骤和控制流图，可以清晰地理解链接上传功能的实现过程。用户输入图片链接并点击上传按钮后，系统会将链接转换
6. 为文件对象并添加到文件列表中，最终显示上传成功的图片。