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

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

直接上代码：

先上布局代码：

<div id="picture">
    
    <input type="file" id="pictureupload"  />
    <button id="upload" οnclick="v()">上传图片</button>
</div>

接下来是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(); } }

就是这样，简单，还需要配置文件：
<!-- 文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8"></property> <property name="maxUploadSize" value="10485760000"></property> <property name="maxInMemorySize" value="40960"></property> </bean> <!-- responbody --> <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/html;charset=UTF-8</value> </list> </property> </bean> <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <ref bean="stringHttpMessageConverter"> </ref></list> </property> </bean> <bean id="stringHttpMessageConverter" class="org.springframework.http.converter.StringHttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/html;charset=UTF-8</value> </list> </property> </bean> <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <ref bean="stringHttpMessageConverter"> <ref bean="mappingJacksonHttpMessageConverter"> </ref></ref></list> </property> </bean> <!-- 注解结束 -->

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