关于小程序&VUE上传文件的java处理方法

简述

相关文章有很多，在此记录一下用起来个人一直在用的一种方式：使用servlet来独立处理文件上传，获取前端的文件之后向CDN同步，最后返回文件的最终相对路径，由前端访问CDN服务来展示图片；

使用servlet的方便性在于可以跟项目实现零耦合，方便快速移植。

好了，废话不多说，直接上代码，注释都在代码里了；

java处理servlet

package com.TVMall.web.filter;import com.TVMall.core.util.FileUtil;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.lang.StringUtils;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Iterator;import java.util.List;/** * Project: * * File: MicroSoftUpLoadFilter * * Description: 小程序&VUE formData上传图片servlet * * @author: MikeLC * * @date: 2017/11/14 上午 10:04 * * Copyright ( c ) 2017 * */public class MicroSoftUpLoadFilter extends HttpServlet {    private static final long serialVersionUID = 1L;    //文件目录    private String uploadFilePath = "D:\\temp";    File tempFile;    //打印日志    protected Log logger = LogFactory.getLog(this.getClass());    /**     * @see HttpServlet#HttpServlet()     */    public MicroSoftUpLoadFilter() {        super();    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doPost(request, response);    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        DiskFileItemFactory factory = new DiskFileItemFactory();        factory.setSizeThreshold(4096);//缓冲区大小        factory.setRepository(tempFile);//缓冲区目录        ServletFileUpload upload = new ServletFileUpload(factory);        upload.setSizeMax(4194304);//最大文件尺寸,4MB        SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");        String resultPath = "";        List<String> ressultPathList = new ArrayList<String>();        String relatePath = "";        try {            List<FileItem> fileItems = upload.parseRequest(request);            Iterator<FileItem> i = fileItems.iterator();            boolean flag = false;//判断recordId是否为空            String value = "";            while(i.hasNext()){                FileItem fileItem = i.next();                String fileName = fileItem.getName();                if (fileItem.getFieldName() != null) {//formData中的数据                    if (fileItem.isFormField()) {//一般的表单域,即获取formData中的参数                        value = fileItem.getString("utf-8");                        System.out.println(value);                        if (StringUtils.isEmpty(value)) {                            flag = true;                        }                        //                        if(fileItem.getFieldName().equals("relatePath")){                            relatePath = value;                        }                    }                }                //                if(fileName != null){                    String path = FileUtil.buildImgPath(request,relatePath);                    String realPath = request.getRealPath(path);                    File filePath = new File(realPath);                    if (!filePath.exists()) {                        try {                            filePath.mkdirs();                        } catch (Exception e) {                            e.printStackTrace();                        }                    }                    File file = new File(filePath + "/" + fileName);                    fileItem.write(file);                    //同步                    FileUtil.sendFileOperate(file,request,relatePath);                    //                    resultPath = path +"/"+ fileName;                    ressultPathList.add(resultPath);                }            }            //            //byte[] jsonStr = JSON.toJSONBytes(ressultPathList);            byte[] jsonStr = resultPath.getBytes();            response.setHeader("Content-type", "text/html;charset=UTF-8");            response.setCharacterEncoding("UTF-8");            //response.getOutputStream().write(jsonStr);            //            PrintWriter pw = response.getWriter();            pw.write(resultPath);            System.out.println("upload success");        } catch (Exception e) {            e.printStackTrace();            logger.info("upload throw exception!");        }    }}

配置servlet

    <!-- 图片上传 -->    <servlet>        <description></description>        <display-name>MicroSoftUpLoadFilter</display-name>        <servlet-name>MicroSoftUpLoadFilter</servlet-name>        <servlet-class>com.TVMall.web.filter.MicroSoftUpLoadFilter</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>MicroSoftUpLoadFilter</servlet-name>        <url-pattern>/wxUpload/*</url-pattern>    </servlet-mapping>

前端代码

微信小程序

wx.uploadFile({    url: 'https://xxxxxx/upload/tongue',    filePath: filePath,//图片路径，如tempFilePaths[0]    name: 'image',    header : {      "Content-Type": "multipart/form-data"    },    formData:    {      userId: 12345678 //附加信息为用户ID    },    success: function (res) {      console.log(res);    },    fail: function (res) {      console.log(res);    },    complete: function (res) {    }  })

Vue

<script>    export default {        name : 'MoUpload',        props : {            accepts : { //允许的上传类型                type : String,                default : 'image/jpeg,image/jpg,image/png,image/gif'            },            flag : [String, Number], //当前上传标识,以便于在同一个监听函数中区分不同的上传域            maxSize : {                type : Number,                default : 0 //上传大小限制            },         },        methods: {            upload (event) {                let file = event.target.files[0]                const self = this                const flag = this.flag                if (file) {                    if (this.maxSize) {                        //todo filter file                    }                    //filter file, 文件大小,类型等过滤                    //如果是图片文件                    // const reader = new FileReader()                    // const imageUrl = reader.readAsDataURL(file)                    // img.src = imageUrl //在预览区域插入图片                    const formData = new FormData()                    formData.append('file', file)                    //获取token                    this.$http.get(`/api/token/`)                    .then(response => {                        const result = response.body                        formData.append('token', result.token)                        formData.append('key', result.key)                        //提交给七牛处理                        self.$http.post('https://up.qbox.me/', formData, {                            progress(event) {                                //传递给父组件的progress方法                                self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag)                             }                        })                        .then(response => {                            const result = response.body                            if (result.hash && result.key) {                                //传递给父组件的complete方法                                self.$emit('complete', 200 , result, flag)                                //让当前target可以重新选择                                event.target.value = null                            } else {                                self.$emit('complete', 500, result, flag)                            }                        }, error => self.$emit('complete', 500, error.message), flag)                    })                }            }        }    }</script>

推荐文章

在研究Vue的上传中，这篇文章描述的很细致，强烈推荐；