大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
<el-upload class="upload-demo" ref="upload" accept="image/png,image/jpg,image/jpeg" :file-list="fileLists" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :auto-upload="false" list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<br>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
在data中定义
data: {
fileLists: [],
使用on-change属性，将每次添加的文件依次推入到fileLists中，然后将fileLists的文件使用formData封装，请求头为'multipart/form-data'
handleChange(file) {
this.fileLists.push(file)
},
submitUpload() {
const formData = new FormData()
// 因为要传一个文件数组过去，所以要循环append
this.fileLists.forEach((file) => {
formData.append('files', file.raw)
})
this.uploadRequest(formData)
},
uploadRequest(formData) {
let that = this;
axios.post("http://localhost:8080/new/upload", formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(function (res) {
console.log(res)
if (res.data.result == "ok") {
that.$message.success('上传成功!');
}
})
.catch(function (err) {
that.$message.error('网络请求异常!');
})
},
后端代码：
@PostMapping("/new/upload")
public BaseResultModel uploadPic(@RequestParam("files") MultipartFile[] files) {
// 逻辑
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/181289.html原文链接：https://javaforall.net
