vue里边的elementui的文件上传是怎么使用的？里面的参数是什么意思？

最新推荐文章于 2023-02-16 11:44:00 发布

原创最新推荐文章于 2023-02-16 11:44:00 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何在SpringBoot中配置文件上传，利用Nginx作为持久化存储，并通过Postman进行测试验证。同时，讲解了Vue前端使用ElementUI的el-upload组件进行文件上传的配置和相关属性含义，包括action属性的代理设置。

我们先不讨论ElementUI的 el-upload 标签是怎么使用的，先研究一下后端的代码是怎么写的

在本机安装一个nginx，并且知道它的部署目录是什么，我的系统macOS，nginx的访问根目录就是 /usr/local/var/www ，如果是windows，那么根目录就是 nginx安装目录下的html目录下（听度娘说的）

这个nginx是用来永久保存上传的文件的，因为idea内置tomcat重新启动的时候，就会把这些已经上传的图片给清理掉，所以要复制一份到nginx

新建一个springboot的工程，建立一个controller类，名叫FileUploadController吧

其中，copy方法里边，有4个参数

copy(String source, String dest,String fileName, int bufferSize)

source参数要传入本地文件的绝对路劲，先上传到idea内置tomcat，会生成一个图片的绝对路劲，代入进去就行了，这个路劲当然是要包含图片文件名的

dest参数要传入复制的目标路劲，目标路劲最后面就不需要带文件名了，只是一个目录

fileName就是文件名了，不多说

bufferSize byte数组大小，填个适当的数字就行

package com.xeon.orderconsumer.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
@RequestMapping("/imgupload")
public class FileUploadController {
    String nginxServer = "http://127.0.0.1:8080";

    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd");
    @PostMapping("uploadHousekeeperImage")
    public Map<String,Object> fileupload(MultipartFile file, HttpServletRequest request) {
            Map<String,Object> result = new HashMap<>();
            String originName = file.getOriginalFilename();
            if(!(originName.endsWith(".jpg")||originName.endsWith(".jpeg")||originName.endsWith(".png"))){
                result.put("status","error");
                result.put("msg","文件类型找不到");
                return result;
            }
            String format = sdf.format(new Date());
            String realPath = request.getServletContext().getRealPath("/")+format;
            System.out.println("realPath:::"+realPath);
            File folder = new File(realPath);
            System.out.println("folder:::"+folder);
            if(!folder.exists()){
                folder.mkdirs();
            }
            String newName = UUID.randomUUID().toString().substring(0,16)+".jpg";
            try{
                file.transferTo(new File(folder,newName));
                String url = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+format+"/"+newName;
                copy(realPath+"/"+newName,"/usr/local/var/www"+format,newName,64);
//                String url = request.getScheme()+"://"+"127.0.0.1"+":"+"8080"+format+newName;
                result.put("status","success");
                result.put("url",nginxServer+"/"+format+"/"+newName);
                result.put("localUrl",url);
            }catch (Exception e){
                result.put("status","error");
                result.put("msg",e.getMessage());
                return result;
            }

            return result;

    }

    public static void copy(String source, String dest,String fileName, int bufferSize) {
        System.out.println(source);
        System.out.println(dest);
        System.out.println(fileName);
        InputStream in = null;
        OutputStream out = null;
        try {
            in = new FileInputStream(new File(source));
            File newPath = new File(dest);
            if(!newPath.exists()){
                newPath.mkdirs();
            }
            out = new FileOutputStream(new File(dest+"/"+fileName));

            byte[] buffer = new byte[bufferSize];
            int len;

            while ((len = in.read(buffer)) > 0) {
                out.write(buffer, 0, len);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


}

使用postman测试一下请求，看能不能上传文件

确实是可以的，已经上传到了，nginx的目录下

postman返回了这些数据，我们用url属性的值复制过来访问一下浏览器，应该是没问题的，浏览器会显示一张图片

vue前端的ElementUI的el-upload怎么使用？标签的属性含义是什么？

先上代码，往下解析这些属性是什么意思

el-upload 标签

<el-upload
                action="/image/imgupload/uploadHousekeeperImage"
                :on-preview="handlePreview"
                :on-success="successUpload"
                accept="*"
                :on-remove="onRemove"
                :limit="10">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">上传照片</div>
                <img :src="imageUrl" style="width: 100px;height: 100px" v-if="imageUrl!==''">
              </el-upload>

定义数据，图片的url，即访问地址

data(){
        return {
          imageUrl: ''
        }
      }

定义方法：

methods:{
        onRemove(file, fileList){
          this.imageUrl = ''
        },
        successUpload(response, file, fileList){
          this.imageUrl = file.response.url;
        },
        handlePreview(file) {
          window.open(file.response.url);
          console.log(file.response.url);
        }
}