【vue】框架之el-upload使用

2.upload.vue 页面<template><div class="app-container"><form id="upload" enctype="multipart/form-data" method="post">&amp

曼_雨_馨_渼

24587人浏览 · 2018-05-23 17:54:56

曼_雨_馨_渼 · 2018-05-23 17:54:56 发布

1.upload.vue 页面

<template>
<div class="app-container">
<form id="upload" enctype="multipart/form-data" method="post">
<el-upload
class="upload-demo"
    action=""
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :http-request="handlePost"
    :file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</form>
</div>
</template>

'use strict';

// import splitPane from 'vue-splitpane'

import { postUpload } from '@/api/api'

// import waves from '@/directive/waves' // 水波纹指令

export default {

data() {

return {

fileList: [

{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },

{ name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }

]

};

methods: {

handleRemove(file, fileList) {

console.log(file, fileList);

handlePreview(file) {

console.log(file);

handleExceed(files, fileList) {

this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);

beforeRemove(file, fileList) {

return this.$confirm(`确定移除 ${file.name}？`);

handlePost(file) {

// action="/docmanager/external/upload"

var data = document.getElementById('upload');

const fd = new window.FormData(data)

fd.append('categoryId', 1)

fd.append('tag', 2)

fd.append('description', 3)

fd.append('prefix', 4)

fd.append('file', file)

// 配置post请求的参数。参数名file,后面跟要传的文件，参数名fileType，值为category（看后端的具体要求）

// fd.append('file', file)

postUpload(fd).then(response => {

console.log(1);

console.log(response);

console.log(file);

console.log(2);

})

}

</script>

</style>

2.api.js
postUpload ：最终请求的rest路径

export const postUpload = params => {

return service.post('/docmanager/file', params).then(res => res.data)

}

3.FileController.java 后台接口

@RestController
@RequestMapping("/file")
public class FileController {

@AuthInterceptor
@RequestMapping(value = "", method = RequestMethod.POST)
public String upload(int categoryId, String tag, String description, String prefix, 
            @RequestParam("file") MultipartFile multipartFile) {
    User user = (User) request.getSession().getAttribute(ValueConsts.USER_STRING);
    return ControllerUtils.getResponse(
    fileService.upload(categoryId, tag, description, prefix, multipartFile,user));
}

}

注意：自己在开发中遇到的问题

e1：action="/docmanager/file" 这样可以自动提交，当我想自己写方法处理，于是查看了el-upload的官方文档，
    提供了http-request="自己的function名称"
e2:action提交的时候可以请求到后台接口，但是自己写的函数post的提交的时候却不能，问题出现在几个方面
      a1：请求头部格式enctype="multipart/form-data";
      a2：请求利用FormData提交;
        var data = document.getElementById('upload');

const fd = new window.FormData(data)

fd.append('categoryId', 1)

fd.append('tag', 2)

fd.append('description', 3)

fd.append('prefix', 4)