SpringMvc+Element-UI 文件上传组件的一点总结

总结中,使用的是springMvc+commons-file-upload插件,也就是说,您需要先了解SpringMvc和Element-ui的基本使用,首先我会讲解mvc网站后端的操作,后半部分讲解element-ui上传组件的使用.

SpringMvc 只讲到 文件上传并返回图片 服务器相对路径为止

第一步,在pom.xml中 先导入fileupload的依赖

        <!-- 文件上传  版本请自定 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>  
        </dependency>

 

第二步,配置springMvc 的MultiPart文件解析

在xml配置中加入如下配置 这里,我没有使用注解配置, 原理相同

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"/>
        <property name="maxUploadSize" value="#{1024*1024}"/>
    </bean>

 

第三步 Controller写法和注意事项

controller中对应的方法 一定要加 @ResponseBody 注解
要不然会出现URL目录重复的情况，如'baseServer+"affix/imgUpload"' 最终 会拼接成:affix/affix/imgUpload

这里上传我的示例代码

/**
*方法的参数 变量名,需要对应  html表单中 <el-upload >标签中  name 属性的 值 
*/
@ResponseBody
@RequestMapping("/imgUpload")
public ResultInfo imgUpload(MultipartFile multipartFile){
    ResultInfo resultInfo = new ResultInfo();

    try {
        String originalFilename = multipartFile.getOriginalFilename();

        //取出文件扩展名
        String fileType = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
        UUID uuid = UUID.randomUUID();
        String newFileName = uuid+"."+fileType;
        String imgDir = "E:\\Projects\\ssm\\src\\main\\webapp\\img\\product\\small\\";

        //存储路径拼接Uuid文件名  最终存储文件路径
        String filePath=imgDir+newFileName;
        multipartFile.transferTo(new File(filePath));

        //上传完成，将 服务器图片相对路径 返回
        resultInfo.setFlag(true);
        resultInfo.setData("img/product/small/"+newFileName);
    } catch (IOException e) {
        e.printStackTrace();
        resultInfo.setFlag(false);
        resultInfo.setData(e.getStackTrace());
    }
    return resultInfo;
}

　　

Element-UI部分

渲染层（HTML部分） 这部分应该出现在表单中

只需要关注的部分有:
name="controller接收参数的变量名"
action="上传的url"
//这一步,一般是将返回的文件路径,传入到表单data中,作为提交表单的body
:on-success="文件上传成功的处理方法"

<!--        上传图片        -->
    <el-form-item label="图片">
        <el-upload
                class="upload-demo"
                name="controller接收参数的变量名"
                action="上传的url"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                :file-list="fileList2"
                list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </el-form-item>

 

Data部分

表单数据 ,image用来接收返回的Url

form: {
                    rname: '',
                    price: 0,
                    routeIntroduce: "",
                    cid: 0,
                    image:""
                }

 

/图片上传组件自带数据

//图片上传组件自带数据
    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'
    }]

 

method部分 用来将服务器返回的url赋值到表单data中

 handleUploadSuccess(response,file,fileList){
        //将需要保存到数据库的地址赋值给表单form，用于提交给后台，插入到数据库中
        //console.log(response);
        this.form.image=response.data.data;
    }

 

至此,表单data中有了图片Url,就可以一起提交到后端了,关于取消提交的逻辑,还有上传多张图片的逻辑,以后还会总结