项目场景:
实现后台上传图片
本次使用vue3加elementUI的upload组件实现功能
表单中的参数,需要通过上传来完成,一般有二种情况在上传
一.上传后直接调用后端通用上传工具,在文件服务中调回来用Url存到数据库中。
二.通过将上传的信息以FormData的形式传入,并且在后端通过MultipartFile形式取出后丢入底层进行解析
下面先解析普通上传的方式:
一.上传后直接调用后端通用上传工具,在文件服务中调回来用Url存到数据库中。
技术代码
方式一:使用action自动上传(不推荐)
<el-upload
:action="uploadFileUrl"
ref="upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:limit="10"
:headers="headers"
:on-exceed="handleExceed"
:file-list="formData.fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
方式二:使用自动上传:http-request=“UploadImage”
<el-upload
action="#"
ref="upload"
:http-request="UploadImage"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:limit="10"
:headers="headers"
:on-exceed="handleExceed"
:file-list="formData.fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
UploadImage(param) {
const formData = new FormData();
formData.append("file", param.file);
//调用后端上传APIupoloadFile(formData) .then((response) => {
//将后端返回的URL作为展示图层
form.orgLogo = response.data.paseUrl
}
},
后端只需要通过简单的MultipartFile file 去接收前端传来的参数并且传入底层接口,后续返回给一个URL就已经完成该任务
(底层接口将文件存储到阿里云等云服务上,通过设置bucketName等属性,将文件存储起来后返回一个URL给前端即可完成)
2.通过将上传的信息以FormData的形式传入,并且在后端通过MultipartFile形式取出后丢入底层进行解析
<el-upload :file-list="filelist" class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" :before-remove="beforeRemove" :before-upload="handleBeforeUpload" :limit="1" :on-exceed="handleExceed" :auto-upload="false" > <el-button type="primary">上传</el-button> <template #tip> <div class="el-upload__tip"> 请上传大小不超过<span style="color: #f56c6c">{{ fileSize }}MB</span> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>的文件 </div> </template> </el-upload>
通过:before-upload="handleBeforeUpload"和 :on-change="handleChange"来完成对于FormData信息的存储
// 上传前校检格式和大小
const handleBeforeUpload =(file)=> {
// 校检文件类型
// 校检文件类型
if (fileType) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = fileType.some((type) => {
if (file.raw.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk) {
proxy.$message.error(
`文件格式不正确, 请上传${fileType.join("/")}格式文件!`
);
return false;
}
}
// 校检文件大小
if (fileSize) {
const isLt = file.size / 1024 / 1024 < fileSize;
if (!isLt) {
proxy.$message.error(`上传文件大小不能超过 ${fileSize} MB!`);
return false;
}
}
return true;
}
// 文件个数超出
const handleExceed =()=> {
proxy.$message.error(`上传文件数量不能超过1个!`);
}
const handleChange = (file, fileList) =>{
console.log(file)
const result=handleBeforeUpload(file)
console.log(result)
if(result){
fileList.value=[]
fileList.value.push(file);
form["file"] = file.raw;
}
}
以这种form["file"] = file.raw;加入到表单的参数中
/**提交 */ const submit = () => { formRef.value.validate(valid => { if (valid) { form.abilityName = dynamicTags.value.join(","); form.operatorType = form.operatorType.toString() if(form.id){ API_POST_editOperator(form).then(response => { props.user.operatorFlag=1 getOperatorInfo() ElMessage.success("修改成功"); }); }else{ form.userId=props.user.userId; API_POST_addOperator(form).then(response => { getOperatorInfo() ElMessage.success("添加成功"); }); } } }); }
export function API_POST_editOperator (data) { return request({ url: `/uav/operator/edit`, method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data: data }) }
在headers加上Content-Type的形式发送到后端服务器中
@PostMapping("/edit") public R edit(UavOperatorVo uavOperator) { return uavOperatorService.updateUavOperator(uavOperator); }@TableField(exist = false) private MultipartFile file;
public R updateUavOperator(UavOperatorVo uavOperator) { MultipartFile multipartFile = null; if(uavOperator.getFile()!=null){ multipartFile=uavOperator.getFile(); } uavOperator.setFile(null); return uavOperatorClient.updateUavOperator(uavOperator,multipartFile); }
@Post(url = "/operator/edit",contentType = "multipart/form-data") R updateUavOperator(@Body UavOperatorVo uavOperator, @DataFile(value = "file") MultipartFile multipartFile);
这里通过在ServiceImpl中取出从前端存的FormData的信息,最后在调用底层通过加上contentType 和 @DataFile 调用到底层存储服务器