Vue上传图片

最新推荐文章于 2024-05-27 11:24:13 发布

勇敢小陈

最新推荐文章于 2024-05-27 11:24:13 发布

阅读量964

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/ct5211314/article/details/130760399

版权

文章详细阐述了一个图片上传的过程，包括使用组件如elementUI获取文件列表，利用FormData构造数据，修改文件名，发送到后台获取URL，再将URL发送给后台以完成上传。代码示例展示了如何处理文件和与后台交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，讲一下上传图片的流程，相信大家一看就会了，一般通过elementUI等组件库的上传组件，获取到对应的选中的文件列表的信息，获取到列表信息中的raw属性，通过FormData构造数据，然后发送给后台，后台根据你发送的数据，生成对应的url，你获取到url后，将url作为入参发送给后台，一个图片上传的流程到这里就结束了。下面进行一些代码的讲解说明。

一、代码展示

//在这里因为需求可以更改文件名称，所以新增了更改文件名
let renameFile = addedQuantity.map(file => {
    return new File([file.raw], file.name, {
		type: file.raw.type,
			});
		});
//创建FormData实例
const fo = new FormData();
//给实例添加文件属性
renameFile.forEach(file => fo.append("file", file));
//将处理好的FormData实例发送给后台，接收后台返回的url数据集合
imgs = await deviceOrgApi.uploadFile(fo);
let images = tablist.map(item => {
    return {
	...item,
	file_name: item.name,
	file_sort: "",
		};
	});
//处理完成后发送给后台，上传成功
deviceOrgApi
    .saveBatch(this.node_id, { images })
    .then(res => {
        this.$message.success("上传成功");
        this.getNodeGallery();
        this.$parent.equipmentLibrary(this.node_id);
});