当我们没有搭建单独的文件服务器时，我们需要将文件上传至项目目录下，今天我们就学习如何上传文件到项目的resources目录下
 
一、引入依赖
 
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>
<dependency>
    <groupId>commons-net</groupId>
    <artifactId>commons-net</artifactId>
    <version>3.3</version>
</dependency>
 
文件上传，就会涉及到 IO 操作，我们需要引入以上依赖
 
二、配置文件
 
spring:
  # 上传文件
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB
 
配置上传文件的最大值：
 
spring.servlet.multipart.max-file-size，限制单个文件的最大值
spring.servlet.multipart.max-request-size，限制上传的多个文件的总大小
 
三、上传工具类
 
package com.asurplus.common.utils;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.util.ResourceUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.net.InetAddress;
import java.util.UUID;

/**
 * 文件上传
 *
 * @author YangXiuTeng
 * @date Jun 1, 2015
 */
@Component
public class UploadFileUtil {

	/**
	* 项目端口
	*/
    @Value("${server.port}")
    public String port;

	/**
	* 项目路径
	*/
    @Value("${server.servlet.context-path}")
    public String contextPath;

	/**
     * 上传文件
     * 
     * @param multipartFile 文件对象
     * @param dir 上传目录
     * @return
     */
    public ResponseResult uploadFile(MultipartFile multipartFile, String dir) {
        try {
            if (multipartFile.isEmpty()) {
                return ResponseResult.error("请选择文件");
            }
            // 获取文件的名称
            String originalFilename = multipartFile.getOriginalFilename();
            // 文件后缀 例如：.png
            String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf("."));
            // uuid 生成文件名
            String uuid = String.valueOf(UUID.randomUUID());
            // 根路径，在 resources/static/upload
            String basePath = ResourceUtils.getURL("classpath:").getPath() + "static/upload/" + (StringUtils.isNotBlank(dir) ? (dir + "/") : "");
            // 新的文件名，使用uuid生成文件名
            String fileName = uuid + fileSuffix;
            // 创建新的文件
            File fileExist = new File(basePath);
            // 文件夹不存在，则新建
            if (!fileExist.exists()) {
                fileExist.mkdirs();
            }
            // 获取文件对象
            File file = new File(basePath, fileName);
            // 完成文件的上传
            multipartFile.transferTo(file);
            // 返回绝对路径
            return ResponseResult.success("上传成功", "http://" + InetAddress.getLocalHost().getHostAddress() + ":" + port + contextPath + "/upload/" + fileName);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ResponseResult.error("上传失败");
    }
}

 
我们由于需要在工具类中获取项目端口及上下文路径，所以我们使用注解 @Component
我们上传的根目录在：resources/static/upload
文件名，我们使用了 uuid 作为新的文件名，保证文件不会被覆盖
我们返回的路径是绝对路径，在实际的生成环境中，建议使用相对路径
ResponseResult 是我们自定义的统一返回对象，表示成功还是失败
 
四、上传调用
 
1、注入上传工具类
 
@Autowired
private UploadFileUtil uploadFileUtil;
 
2、上传 API
 
/**
 * 上传文件
 * <p>
 * Ajax方式上传文件
 *
 * @return
 */
@PostMapping("uploadFileAjax")
@ResponseBody
public ResponseResult uploadFileAjax(HttpServletRequest request) {
    MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
    MultipartFile file = multiRequest.getFile("files");
    String dir = request.getHeader("Minio-dir");
    return uploadFileUtil.uploadFile(file, dir);
}
 
3、上传调用
 
Html
 
<p>ajax提交</p>
<hr>
<div style="height: 200px;width: 200px;position: relative;border: 1px #e2e2e2 solid">
    <input type="file" accept="image/*" id="imgUpload" style="position: absolute;left: 0;top: 0;opacity: 0;filter: alpha(opacity=0);height: 100%;width: 100%;z-index: 99">
    <img src="" alt="" id="picImg" style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;">
</div>
 
JavaScript
 
$('#imgUpload').change(function () {
    var formData = new FormData();
    formData.append("files", $("#imgUpload")[0].files[0]);
    var index = layer.load();
    $.ajax({
        type : "POST",
        cache: false,
        dataType: "json",
        data : formData,
        processData :  false,
        contentType :  false,
        url: baseUrl + 'uploadFileAjax',
        success:function(res){
            layer.close(index);
            layer.msg(res.msg);
            if(200 == res.code){
                $('#picImg').attr('src',res.data);
            }
        },
        error:function() {
            layer.close(index);
            layer.msg("服务器异常！");
        }
    });
});
 
五、上传测试
 

 点击上传
 

 图片上传成功，转到上传目录：
 

 成功上传至项目的 resources/static/upload/ 目录下
 
如您在阅读中发现不足，欢迎留言！！！

上一篇 写给大忙人看的 - 搭建文件服务器 MinIO（一），我们已经成功地搭建了 MinIO 文件服务器，这一篇讲解在 Java 中如何上传文件至 MinIO
 
一、开发前戏
 
1、项目中引入 maven 依赖
 
<!-- minio 相关依赖 -->
<dependency>
    <groupId>io.minio</groupId>
    <artifactId>minio</artifactId>
    <version>3.0.10</version>
</dependency>
<!-- alibaba的fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.51</version>
</dependency>
<!-- thymeleaf模板引擎 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
 
这里除了 MinIO 的相关依赖，还添加了 fastjson，thymeleaf 的相关依赖，篇幅原因，其余依赖请自行添加
 
2、添加配置信息
 
在 application.yml 文件中加入 MinIO 服务器的相关信息
 
# minio 文件存储配置信息
minio:
  endpoint: http://127.0.0.1:9000
  accesskey: minioadmin
  secretKey: minioadmin
 
3、创建实体类
 
package com.zyxx.email.common.minio;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * minio 属性值
 */
@Data
@Component
@ConfigurationProperties(prefix = "minio")
public class MinioProp {
    /**
     * 连接url
     */
    private String endpoint;
    /**
     * 用户名
     */
    private String accesskey;
    /**
     * 密码
     */
    private String secretKey;
}

 
这一步，我们将配置文件中 minio 的配置信息通过注解的方式注入到 MinioProp 这个实体中，方便后面我们使用
 
4、创建核心配置类
 
package com.zyxx.email.common.minio;

import io.minio.MinioClient;
import io.minio.errors.InvalidEndpointException;
import io.minio.errors.InvalidPortException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * minio 核心配置类
 */
@Configuration
@EnableConfigurationProperties(MinioProp.class)
public class MinioConfig {

    @Autowired
    private MinioProp minioProp;

    /**
     * 获取 MinioClient
     *
     * @return
     * @throws InvalidPortException
     * @throws InvalidEndpointException
     */
    @Bean
    public MinioClient minioClient() throws InvalidPortException, InvalidEndpointException {
        return new MinioClient(minioProp.getEndpoint(), minioProp.getAccesskey(), minioProp.getSecretKey());
    }
}

 
通过注入 MinIO 服务器的相关配置信息，得到 MinioClient 对象，我们上传文件依赖此对象
 
5、上传工具类
 
package com.zyxx.email.common.minio;

import com.alibaba.fastjson.JSONObject;
import com.zyxx.email.common.redis.RedisUtil;
import com.zyxx.email.utils.DateUtils;
import io.minio.MinioClient;
import lombok.SneakyThrows;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

@Slf4j
@Component
public class MinioUtils {

    @Autowired
    private MinioClient client;
    @Autowired
    private MinioProp minioProp;

    /**
     * 创建bucket
     *
     * @param bucketName bucket名称
     */
    @SneakyThrows
    public void createBucket(String bucketName) {
        if (!client.bucketExists(bucketName)) {
            client.makeBucket(bucketName);
        }
    }

    /**
     * 上传文件
     *
     * @param file       文件
     * @param bucketName 存储桶
     * @return
     */
    public JSONObject uploadFile(MultipartFile file, String bucketName) throws Exception {
        JSONObject res = new JSONObject();
        res.put("code", 0);
        // 判断上传文件是否为空
        if (null == file || 0 == file.getSize()) {
            res.put("msg", "上传文件不能为空");
            return res;
        }
        // 判断存储桶是否存在
        createBucket(bucketName);
        // 文件名
        String originalFilename = file.getOriginalFilename();
        // 新的文件名 = 存储桶名称_时间戳.后缀名
        String fileName = bucketName + "_" + System.currentTimeMillis() + originalFilename.substring(originalFilename.lastIndexOf("."));
        // 开始上传
        client.putObject(bucketName, fileName, file.getInputStream(), file.getContentType());
        res.put("code", 1);
        res.put("msg", minioProp.getEndpoint() + "/" + bucketName + "/" + fileName);
        return res;
    }
}

 
二、开发进行中
 
1、编写 Controller
 
package com.zyxx.email.controller;

import com.alibaba.fastjson.JSONObject;
import com.zyxx.email.common.minio.MinioUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

@Controller
public class MinioController {

    @Autowired
    private MinioUtils minioUtils;

    @GetMapping("init")
    public String init() {
        return "file";
    }

    /**
     * 上传
     *
     * @param file
     * @param request
     * @return
     */
    @PostMapping("/upload")
    @ResponseBody
    public String upload(@RequestParam(name = "file", required = false) MultipartFile file, HttpServletRequest request) {
        JSONObject res = null;
        try {
            res = minioUtils.uploadFile(file, "product");
        } catch (Exception e) {
            e.printStackTrace();
            res.put("code", 0);
            res.put("msg", "上传失败");
        }
        return res.toJSONString();
    }
}

 
2、上传页面
 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
        <form accept-charset="UTF-8" th:action="@{upload}" method="post" enctype="multipart/form-data" target="_blank">
            文件:<input type="file" name="file"/>
            <input type="submit" value="上传"/>
        </form>
    </body>
</html>
 
这里我用的 thymeleaf 模板引擎
 
三、上传测试
 
1、访问地址
 
http://localhost:8080/init
 
 
2、启动 MinIO 文件服务器
 
3、响应信息
 
{"msg":"http://127.0.0.1:9000/product/product_1589105654237.png","code":1}
 
http://127.0.0.1:9000/product/product_1589105654237.png 就是我们上传之后得到的文件地址了
 
4、访问文件
 
MinIO 形式上传的文件也不支持直接访问，我们如果需要直接访问，还需要做如下操作：
 
 设置 bucket 的 policy 策略：
 
 设置该存储桶下面的文件为 Read and Write，这时我们就可以直接访问了
 
 
四、完整工具类代码
 
package com.zyxx.email.common.minio;

import com.alibaba.fastjson.JSONObject;
import com.zyxx.email.utils.DateUtils;
import io.minio.MinioClient;
import io.minio.ObjectStat;
import io.minio.messages.Bucket;
import lombok.SneakyThrows;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.util.*;

@Slf4j
@Component
public class MinioUtils {

    @Autowired
    private MinioClient client;
    @Autowired
    private MinioProp minioProp;

    /**
     * 创建bucket
     *
     * @param bucketName bucket名称
     */
    @SneakyThrows
    public void createBucket(String bucketName) {
        if (!client.bucketExists(bucketName)) {
            client.makeBucket(bucketName);
        }
    }

    /**
     * 获取全部bucket
     */
    @SneakyThrows
    public List<Bucket> getAllBuckets() {
        return client.listBuckets();
    }

    /**
     * 根据bucketName获取信息
     *
     * @param bucketName bucket名称
     */
    @SneakyThrows
    public Optional<Bucket> getBucket(String bucketName) {
        return client.listBuckets().stream().filter(b -> b.name().equals(bucketName)).findFirst();
    }

    /**
     * 根据bucketName删除信息
     *
     * @param bucketName bucket名称
     */
    @SneakyThrows
    public void removeBucket(String bucketName) {
        client.removeBucket(bucketName);
    }

    /**
     * 获取文件外链
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @param expires    过期时间 <=7
     * @return url
     */
    @SneakyThrows
    public String getObjectURL(String bucketName, String objectName, Integer expires) {
        return client.presignedGetObject(bucketName, objectName, expires);
    }

    /**
     * 获取文件
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @return 二进制流
     */
    @SneakyThrows
    public InputStream getObject(String bucketName, String objectName) {
        return client.getObject(bucketName, objectName);
    }

    /**
     * 上传文件
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @param stream     文件流
     * @throws Exception https://docs.minio.io/cn/java-client-api-reference.html#putObject
     */
    public void putObject(String bucketName, String objectName, InputStream stream) throws Exception {
        client.putObject(bucketName, objectName, stream, stream.available(), "application/octet-stream");
    }

    /**
     * 上传文件
     *
     * @param bucketName  bucket名称
     * @param objectName  文件名称
     * @param stream      文件流
     * @param size        大小
     * @param contextType 类型
     * @throws Exception https://docs.minio.io/cn/java-client-api-reference.html#putObject
     */
    public void putObject(String bucketName, String objectName, InputStream stream, long size, String contextType) throws Exception {
        client.putObject(bucketName, objectName, stream, size, contextType);
    }

    /**
     * 获取文件信息
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @throws Exception https://docs.minio.io/cn/java-client-api-reference.html#statObject
     */
    public ObjectStat getObjectInfo(String bucketName, String objectName) throws Exception {
        return client.statObject(bucketName, objectName);
    }

    /**
     * 删除文件
     *
     * @param bucketName bucket名称
     * @param objectName 文件名称
     * @throws Exception https://docs.minio.io/cn/java-client-api-reference.html#removeObject
     */
    public void removeObject(String bucketName, String objectName) throws Exception {
        client.removeObject(bucketName, objectName);
    }

    /**
     * 上传文件
     *
     * @param file       文件
     * @param bucketName 存储桶
     * @return
     */
    public JSONObject uploadFile(MultipartFile file, String bucketName) throws Exception {
        JSONObject res = new JSONObject();
        res.put("code", 0);
        // 判断上传文件是否为空
        if (null == file || 0 == file.getSize()) {
            res.put("msg", "上传文件不能为空");
            return res;
        }
        // 判断存储桶是否存在
        createBucket(bucketName);
        // 文件名
        String originalFilename = file.getOriginalFilename();
        // 新的文件名
        String fileName = bucketName + "_" + DateUtils.getYyyymmdd() + originalFilename.substring(originalFilename.lastIndexOf("."));
        // 开始上传
        client.putObject(bucketName, fileName, file.getInputStream(), file.getContentType());
        res.put("code", 1);
        res.put("msg", minioProp.getEndpoint() + "/" + bucketName + "/" + fileName);
        return res;
    }
}

 
文件的下载功能代码，在后续的文章中会贴出
 
Java Client 指南地址如下：
 
https://docs.min.io/docs/java-client-quickstart-guide.html
 
如您在阅读中发现不足，欢迎留言！！！

一、http post
 
对于文件上传，客户端通常就是页面，在页面里实现上传文件不是什么难事，写个form,加上enctype = "multipart/form-data",在写个接收的就可以了，没什么难的。如：
 
<!DOCTYPE html>  
<html>  
<head>  
<title>Hello World!</title>  
</head>  
<body>  
    <form method="POST" enctype="multipart/form-data" action="/XXX">   
           <p>文件1：<input type="file" name="file1" /></p>  
           <p>文件：<input type="file" name="file" /></p>  
           <p>其他信息：<input name="luid" /></p>  
           <p><input type="submit" value="上传" /></p>  
    </form>
</body>  
</html>  
 
 
如果要用java.net.HttpURLConnection来实现文件上传，还真有点搞头，实现思路和具体步骤就是模拟页面的请求，页面发出的格式如下：
 
-----------------------------7da2e536604c8  
Content-Disposition: form-data; name="luid"  
  
123  
-----------------------------7da2e536604c8  
Content-Disposition: form-data; name="file1"; filename="D:\haha.txt"  
Content-Type: text/plain  
  
haha  
  hahaha  
-----------------------------7da2e536604c8  
Content-Disposition: form-data; name="file"; filename="D:\huhu.png"  
Content-Type: application/octet-stream  
  
这里是图片的二进制数据 
-----------------------------7da2e536604c8--
上面username是form表单中的文本参数，值为123，file1是form表单中上传的文本文件。file是form表单中上传的其他类型的文件，他们的Content-Type不一样。
 
知道了这些，就可以编写代码来模拟了，这里只上传一个文件file，是张图片，附上代码的截图：
 
 
 
 
 
以上的空行"\r\n"是比较严格的，要换行或者换两行，都是根据格式来的。
 
 
 
二、https post
 
一般都是http的请求，但现在也有越来越多的外部接口采用https的方式来调用。比如这次工作中需要调用的FaceId他们的身份证识别接口，这个接口就是https的，而且传递的参数里还需要身份证照片，这明显是个文件。如下：
 
 
 
 
 
 
java后台发起https的文件上传请求的原理以及整个步骤和http的基本一致，只是这次的URLConnection是HttpsURLConnection，而且由于https的请求需要签名等安全认证，所以会在设置HttpsURLConnection时需要多设置两个属性，如下的setSSLSocketFactory()和setHostnameVerifier()：
 
 
所需要的TrustAnyTrustManager类和TrustAnyHostnameVerifier类代码如下：
 
 
其他的代码就和HttpURLConnection的一样了。
 
 
 
以上的代码都是使用JDK自带的net工具类，然后模拟页面的form发出的请求来完成的，如果想使用HttpClient来完成发送请求也是可以的，并且更加简单明了，不需要自己写模拟的步骤。因为是第三方工具包，需引入对应jar包：
 
<dependency> 
 
         <groupId>org.apache.httpcomponents</groupId> 
 
          <artifactId>httpclient</artifactId> 
 
         <version>4.5.2</version>         
 
</dependency> 
 
<dependency> 
 
         <groupId>org.apache.httpcomponents</groupId> 
 
          <artifactId>httpmime</artifactId> 
 
         <version>4.5.2</version>         
 
  </dependency>
 
编写的代码如下：
 
 
以上代码都是经过测试的测试代码，你可以自己封装好以供自己今后使用(ps：别想复制，代码都是图片，因为我在沙盒内，代码复制不出来0.0)！

各位同学，请希望看完，如果看了开头不看结尾, 代码错误请不要怪我。
 
这个必须好好说说,不知道各位同学有没有这样的体验,在使用 elementui的时候,发现它真是一个不要太好的库,真的,体验贼好,毕竟vue是只关注数据层面的框架。vue也确实做的太棒了。
 
说说今天在使用elemenui中 upload 组件的时候,一开始看有好多属性,然后我仔细看了,并总结了以下它的使用和常用属性的作用。
 
limit : 限制了上传文件的个数 ， 如果你上传单个文件这里设置 1 ，多个文件就别设置, 
但是我 建议: ---别设置，下面要奖


auto-upload:自动上传,在我看来，除非是单独上传文件时,
这个属性才有用,因为单独文件直接上传到后台服务器。
而我们想要自己获取到组件里的文件和其它表单数据,再上传,就需要别的办法,下面会讲。


action:这个属性是上传文件的地址,当我们指定了 auto-upload 属性，
组件就会自动按 action 的地址提交。我一般都不设置这个属性：action="none", 
因为我觉得自定义的更好,拓展性强。

multiple：这个属性支持多文件上传,如果你是上传单文件这个属性随便设不设置，如果是多文件,就要设置,
所以建议不动,因为它默认开启。

accept：这个就不细说了,限制类型的,当然仅限选择时的类型，用户要是想上传其它类型的文件照样有办法。

####其它的钩子函数有些多，我就说一下作用吧，

on-preview:这个钩子函数的没啥作用,就是当你选择文件后,显示了文件列表,
你点那个文件列表的的文件,就会触发,一般没有用。

on-remove:	文件列表移除文件触发。

before-upload:是你上传文件之前触发的函数,记住这个函数是上传文件前,不是选择文件之前,很多人在
这里设置了预览图片功能,但是如果一旦 auto-upload 关闭,也就不会自动上传，这个钩子也就不会触发。

。。。。。。。。。。。。。。

以上: 
高能 ....................................................


##########################################最后:

最重要的一个钩子函数,也就是我最推荐用的,非常厉害：on-change 
两个参数:   function(file, fileList) 
file是最新选择的文件，fileList是已经选择过的文件，包含第一个file，也就是当前file

上面我说了 limit 限制了你上传文件的个数，那么 on-change 钩子只会触发一次，因为当你限制一个文件，
参数 file 就一直是 第一个文件 ,不管你后面再选择其它的文件,第一个文件也不会变, 
fileList 文件列表也是会保持第一个文件,如果你想单文件上传,就别设置limit，也就是我上面说的别管它。

那么有同学可能就会问了,limit限制了单文件,但是这个功能好似鸡肋，当用户选择一张图片，但是不满意，
要换，这个时候你 limit 为 1，file 一直不变，那还换个毛。 所以还是我说了别设置 limit：

不设置 limit ，那么你的 on-change 就会一直变，文件列表一直变，但是别忘了 ， on-change 
有两个参数，第一个是用户最新选择的文件，我们抛开第二个 文件列表参数 fileList,
只看第一个 file ，当用户每次选择一个文件，参数file就是这个文件的实例,

*******那么我们是否可以定义一个 值 
....
data(){
reurn{
	currentFile:null
}
}
currentFile 代表当前文件，每次用户选择文件，就调用 on-change钩子 ，
 把 file 赋值给 这个值，然后我们就可以做任何事情，你想这个值就是文件的实例，我们不是想干啥就干啥。
 我们如果要上传其它表单数据，只需要把这个值和和表单数据一起提交不就行了。

 
具体代码 ,我大概演示:
 下面是我上传头像功能的一部分 代码
 
 
 这个 对话框 dialog 是包含在 el-form 组件里面的，印证了我上面所说的，单文件和表单一起上传其实是一件非常简单的事情，关键在于对 elementui 的熟练度。我把自动上传和它指定的地址设置无效了，最终要的就是 chekType 这个函数 , 使用在 on-change 这个钩子上。
 
当用户每次选择图片,就会调用 on-change 钩子函数 checkType ,然后 在checkType里面
我把用户新选择的 图片 赋值给 headImgFile 这个值，当我要提交表单的时候，只需要
判断这个值是否为空。

checkType 函数:
 
 
仔细看逻辑不难，然后需要注意的是我一直 在说 file ，file是实例别忘了,它可是有属性的。
 Java对象都有那么多属性，file 能没有?
 请看：
 
 
file 最终要的三个属性大家一眼就看懂了，唯一最容易被忽略的就是  raw  
记住你上传文件不能直接上传，而是要:
 

 看懂了吗，不要直接把 值 传进去 ， 而是传 raw 属性，这个才是文件。
 
后台接收:
 
 
对了叮嘱一件事情 ， 不要设置在上传的时候,不要设置 表单请求头 ,因为在上传文件
 的时候，浏览器会自动识别你的数据类型，如果你加了表单类型:
 
 反而可能会出错，因为缺少一个边界值 ： 这个是血的教训。所以要么设置就加上边界值，
 这个边界值应该是个随机数。
 
 以上。
 
晚安。。。。。。。。。。。。。。。。。。。。。。。。。。