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
                    method:'post',  //Request mode
                    url:'',         //Request URL
                    data:formData,  //send data
                    header:{'Content-Type' : "multipart/form-data"} //Set response header
                }).then(function (response) {
                    if ( == 200){
                        vue.picEntity.url =;
                    }else {
                        alert("Image upload failed");

pom.xml import dependency

<!-- commons-fileupload -->
<!-- fastdfs-client -->

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"/>

Controller background processing

package com.pinyougou.manager.controller;

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
public class UploadController {

    private String fileServerUrl;

     * File upload to fastDFS server
    public Map<String,Object> upload(@RequestParam("file") MultipartFile multipartFile){
        //Define the Map returned
        Map<String,Object> data = new HashMap<>();
        //Set status
        try {
            //Load profile (fastDFS client address)
            String path = this.getClass().getResource("/fastdfs_client.conf").getPath();
            //Initialize client global object
            //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();
            //Iterative splicing
            for (String string : strings) {
                url.append("/" + string);
            //Upload successful settings return to MAP
            return data;
        }catch (Exception e){
        return data;

     * Remove files from fastDFS
    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();
            StorageClient storageClient = new StorageClient();

            return true;
        }catch (Exception e){
        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