Methods defined in JS

     uploadFile:function () {   //File upload
                var formData = new FormData;  //Get form object (HTML5 object)
                formData.append("file",file.files[0]); //Append file data to form object
                axios({
                    method:'post',  //Request mode
                    url:'',         //Request URL
                    data:formData,  //send data
                    header:{'Content-Type' : "multipart/form-data"} //Set response header
                }).then(function (response) {
                    if (response.data.status == 200){
                        vue.picEntity.url = response.data.url;
                    }else {
                        alert("Image upload failed");
                    }
                })
            }

pom.xml import dependency

<!-- commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
</dependency>
<!-- fastdfs-client -->
<dependency>
    <groupId>org.csource</groupId>
    <artifactId>fastdfs-client</artifactId>
</dependency>

Spring mvc.xml configuration file upload parser

<! -- profile upload parser id name cannot be changed -- >
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <! -- set file upload defau lt code -- >
    <property name="defaultEncoding" value="UTF-8"/>
    <! -- set file upload size 2MB: 2 * 1024 * 1024 -- >
    <property name="maxUploadSize" value="2097152"/>
</bean>

Controller background processing

package com.pinyougou.manager.controller;

import org.apache.commons.io.FilenameUtils;
import org.csource.fastdfs.ClientGlobal;
import org.csource.fastdfs.StorageClient;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;
import java.util.Map;

/**
 * File upload / delete Controller
 */
@RestController
public class UploadController {

    @Value("${fileServerUrl}")
    private String fileServerUrl;

    /**
     * File upload to fastDFS server
     */
    @PostMapping("/upload")
    public Map<String,Object> upload(@RequestParam("file") MultipartFile multipartFile){
        //Define the Map returned
        Map<String,Object> data = new HashMap<>();
        //Set status
        data.put("status",500);
        try {
            //Load profile (fastDFS client address)
            String path = this.getClass().getResource("/fastdfs_client.conf").getPath();
            //Initialize client global object
            ClientGlobal.init(path);
            //Create save client object
            StorageClient storageClient = new StorageClient();
            //Get source upload file name
            String originalFilename = multipartFile.getOriginalFilename();
            //Call save client object upload
            String[] strings = storageClient.upload_file(multipartFile.getBytes(), FilenameUtils.getExtension(originalFilename), null);
            //Create StringBuilder splicing url
            StringBuilder url = new StringBuilder();
            url.append(fileServerUrl);
            //Iterative splicing
            for (String string : strings) {
                url.append("/" + string);
            }
            //Upload successful settings return to MAP
            data.put("status",200);
            data.put("url",url.toString());
            //Return
            return data;
        }catch (Exception e){
            e.printStackTrace();
        }
        return data;
    }

    /**
     * Remove files from fastDFS
     */
    @GetMapping("/delPic")
    public boolean delPic(String url) throws Exception {
        try {
            //Get group name
            int fileNameIndex = url.indexOf("M");
            String fileName = url.substring(fileNameIndex);

            //Get group name
            String[] split = url.split("/");
            String group = split[3];

            //Remove from fastDFS
            String path = this.getClass().getResource("/fastdfs_client.conf").getPath();
            ClientGlobal.init(path);
            StorageClient storageClient = new StorageClient();
            storageClient.delete_file(group,fileName);

            return true;
        }catch (Exception e){
            e.printStackTrace();
        }
        return false;
    }
}
  • Note:
    The value on the collection comes from the page where the picture is uploaded

  • In development, the address cannot be fixed, so it is used in configuration file mode.
  • Client address properties file