前端文件上传3-1：使用xmlhttprequest上传图片（vue环境下）

昨天试了下使用ajax去上传图片，试了下，还真的可以，也不难，就记下来，免得今后又忘记了

直接上代码：

先上布局代码：

    
    
    上传图片

接下来是js语言，也是比较简单，就直接上了：

function v(){

    var  file=document.getElementById("pictureupload").files[0];

    var place="http://localhost/fcsapp77/picture.do";
//1、准备FormData

    var fd = new FormData();

    fd.append("commonsMultipartFile",document.getElementById("pictureupload").files[0]);

    //2。创建xhr对象

    var xhr = new XMLHttpRequest();

    //3.发起ajax请求传送数据

    xhr.open("POST",place);

    xhr.send(fd);

}

大家都看得出，这回需要用到formatdata去“封装”数据

下面是服务端的代码：

public class Pictureupload { @ResponseBody @RequestMapping("/picture.do") public String add(@RequestParam("commonsMultipartFile") CommonsMultipartFile commonsMultipartFile, HttpServletRequest request, HttpServletResponse response) throws IOException { String path = request.getRealPath("/fileupload"); InputStream inputStream = commonsMultipartFile.getInputStream(); File file = new File(path, commonsMultipartFile.getOriginalFilename()); OutputStream outputStream = new FileOutputStream(file); int len = 0; byte[] buffer = new byte[400]; while ((len = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, len); } outputStream.close(); inputStream.close(); // return new PackJson().getone(file.getAbsolutePath()).toString(); return file .getAbsolutePath(); } }

就是这样，简单，还需要配置文件：
text/html;charset=UTF-8 text/html;charset=UTF-8

就是这么多了，本来我打算设置文件保存在d盘。但是在前端用img标签读取的时候不会，所以就不用了