SoFunction
Updated on 2025-04-05

Vue uses el-upload to upload files and pass files between Feign services

1. Front-end code

<el-upload class="step_content" drag
         action="string"
         ref="upload"
         :multiple="false"
         :http-request="createAppVersion"
         :data="appVersion"
         :auto-upload="false"
         :limit="1"
         :on-change="onFileUploadChange"
         :on-remove="onFileRemove">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">Drag the file here，or<em>Click to upload</em></div>

</el-upload>

 <div class="mgt30">
    <el-button v-show="createAppVisible" :disabled="createAppDisable" type="primary" class="mgt30"
          @click="onSubmitClick">Create now
    </el-button>
 </div>

....

 onSubmitClick() {
    this.$();
   },

   createAppVersion(param) {
     = true;

    const formData = new FormData();
    ('file', );
    ('appVersion', ());

    addAppVersionApi(formData).then(res => {
      = false;
     this.$message({message: 'Create APP VERION successfully', type: 'success'});
     ();
    }).catch(reason => {
      = false;
     (reason);
    })

   },

illustrate:

  1. The ref="upload" of el-upload gives this component a variable name so that the js logic code can reference it
  2. http-request="createAppVersion" el-upload to use custom methods
  3. :data="appVersion" Form data submitted when uploading
  4. The onSubmitClick method will call the() method, and then call the createAppVersion() method.
  5. Constitute form parameters to obtain uploaded file and other parameters
const formData = new FormData();
('file', );
('appVersion', ());

Finally, the following method will be called, where formData is param, and the request needs to add a header: 'Content-Type': 'multipart/form-data'

 function httpPostMutipartFileAsyn(url, param) {
 return new Promise((resolve, reject) => {
  request({
   url: url,
   headers: {
    'Content-Type': 'multipart/form-data'
   },
   method: 'post',
   data: param
  }).then(response => {
   if ( === 0) {
    resolve()
   } else {
    reject()
   }
  }).catch(response => {
   reject(response)
  })
 })
}

2. Backend code

1. Backend controller interface

@PostMapping("/version/add")
  public RestResult addAppVersion(@RequestParam("appVersion") String appVersion,
                  @RequestParam("file") MultipartFile multipartFile) {

    ....
    
    return new RestResult();
  }

3. Feign implements the multipartFile parameter passing between services

Controller's addAppVersion() interface, after receiving the uploaded file, you need to call the remote interface through Http to upload the file to the resource service. At the beginning, I tried to use OKHttp and RestTemplate to implement it, but both methods must save the file first and cannot directly pass the MultipartFile parameter, and then I can implement it through the relevant interfaces provided by OKHttp and RestTemplate. In order to not want to save temporary files locally, I found a way to solve it through Feign

1. Add the following dependencies:

    <dependency>
      <groupId></groupId>
      <artifactId>feign-form</artifactId>
      <version>3.0.3</version>
    </dependency>

    <dependency>
      <groupId></groupId>
      <artifactId>feign-form-spring</artifactId>
      <version>3.0.3</version>
    </dependency>

    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.3</version>
    </dependency>

Interface implementation

@FeignClient(name = "resource-client",url = "http://xxxx",path = "resource",configuration = )
public interface ResourceServiceFeignClient {

  @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
  Resource upload(@RequestPart("file") MultipartFile file);

  class MultipartSupportConfig {
    @Bean
    public Encoder feignFormEncoder() {
      return new SpringFormEncoder();
    }
  }

}

Here Feign is an interface call implemented through url, and does not implement interface call through SpringCloud registry service discovery, because the project I am in is independent outside the service system.

3. Automatically inject Feign interface and use it normally.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.