全球网站免费空间注册,社交网站开发教程,带分销功能的小程序,网站主页设计步骤摘要#xff1a; 今天遇到一个问题#xff1a;vue3使用elemnt plus的上传图片时#xff0c;数据是从别人的系统导出来的商品#xff0c;图片是http的形式的#xff0c;并且商品很多的#xff0c;一个一个下载下来再上传很麻烦的#xff0c;所以本系统插件商品时图片使用… 摘要 今天遇到一个问题vue3使用elemnt plus的上传图片时数据是从别人的系统导出来的商品图片是http的形式的并且商品很多的一个一个下载下来再上传很麻烦的所以本系统插件商品时图片使用http的链接上传的形式上传到自己的服务器! templatediv classupload-boxel-uploadv-model:file-listfileList:acceptfileType.join(,):actionuploadUrl:before-uploadbeforeUpload:class[upload, drag ? no-border : ]:disableddisabled:dragdrag:http-requesthttpRequest:limitlimit:multipletrue:on-erroruploadError:on-exceedhandleExceed:on-successuploadSuccesslist-typepicture-carddiv classupload-emptyslot nameemptyIcon iconep:plus /!-- span请上传图片/span --/slot/divtemplate #file{ file }img :srcfile.url classupload-image /div classupload-handle click.stopdiv classhandle-icon clickhandlePictureCardPreview(file)Icon iconep:zoom-in /span查看/span/divdiv v-if!disabled classhandle-icon clickhandleRemove(file)Icon iconep:delete /span删除/span/div/div/template/el-uploaddiv classel-upload__tipslot nametip/slot/divel-image-viewer v-ifimgViewVisible :url-list[viewImageUrl] closeimgViewVisible false /divel-input v-modelimageUrl placeholder请输入图片链接 /el-button clickuploadImage上传/el-button/div/div
/templatescript 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 ;
};
/scriptstyle 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 代码逻辑说明:
输入图片链接用户在 el-input 输入框中输入图片链接。点击上传按钮用户点击“上传”按钮触发 uploadImage 方法。
处理上传逻辑
检查输入的链接是否有效。如果链接无效提示用户。如果链接有效创建文件对象并将文件对象添加到文件列表中。更新文件列表文件列表更新后显示新上传的图片。通过上述步骤和控制流图可以清晰地理解链接上传功能的实现过程。用户输入图片链接并点击上传按钮后系统会将链接转换为文件对象并添加到文件列表中最终显示上传成功的图片。
