΢ Ͷ ^ ھ

cba山西队赛程 :vueʹel-uploadςļFeigngfļķ

cba㶫 www.axwwg.com  •rg2019-04-17 21:43:14   ߣ   ҪuՓ(0)

һǰ˴a




<el-upload class="step_content" drag
action="string"
ref="upload"
:multiple="false"
:http-req

һǰ˴a

<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">ļϵ̎<em>cς</em></div>

</el-upload>

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

....

 onSubmitClick() {
    this.$refs.upload.submit();
   },

   createAppVersion(param) {
    this.globalLoading = true;

    const formData = new FormData();
    formData.append('file', param.file);
    formData.append('appVersion', JSON.stringify(this.appVersion));

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

   },

f

  1. el-upload ref="upload" o@M׃Ա js߉݋a
  2. http-request="createAppVersion" el-upload ςʹʹԶxķ
  3. :data="appVersion" ςrύıΔ
  4. onSubmitClick Е{el-upload.submit()M{createAppVersion
  5. Mɱ΅ȡςfile
const formData = new FormData();
formData.append('file', param.file);
formData.append('appVersion', JSON.stringify(this.appVersion));

6.addAppVersionApi K{ķformDataparam ՈҪ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 (response.data.status.code === 0) {
    resolve(response.data)
   } else {
    reject(response.data.status)
   }
  }).catch(response => {
   reject(response)
  })
 })
}

˴a

1.controllerӿ

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

    ....
    
    return new RestResult();
  }

Feign FgfMultipartFile

ControlleraddAppVersionӿյςļҪͨ^Http{h̽ӿļςYԴһ_ʼLԇʹOKHttp RestTemplate F@ɷN회ļȱoֱӂfMultipartFileȻͨ^OKHttp RestTemplateṩPӿȥF ڱرRrļҵͨ^FeignQһNʽ

1.ه

    <dependency>
      <groupId>io.github.openfeign.form</groupId>
      <artifactId>feign-form</artifactId>
      <version>3.0.3</version>
    </dependency>

    <dependency>
      <groupId>io.github.openfeign.form</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>

2.Feign ӿڌF

@FeignClient(name = "resource-client",url = "//xxxx",path = "resource",configuration = ResourceServiceFeignClient.MultipartSupportConfig.class)
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();
    }
  }

}

@Feignͨ^urlFĽӿ{]ͨ^SpringCloudעķհlF팍Fӿ{,ڵĿǪڷջwϵ

3.FeignӿԄעʹþ

ϾDZĵȫϣҵČWҲϣҶ֧_֮

ܸdȤ:

  • VuebһpςļMʾ
  • vue.jsςļǰˌFa
  • vuejs+element-ui+laravel5.4ςļʾa
  • Vue2.0vue-resourceςļţČa
  • Vue axios ύΔ(ςļ)

P

  • ܴaȵt_ʽɷNJSYƪ

    ܴaȵt_ʽɷNJSYƪ

    Ľo˃ɂܴaȵt_ʽһһsͰȫքeo˃ɂĽ͜yԇһҿԸԼĿČHҪ
    2019-04-17
  • VS+opencvFƄӈDƬ

    VS+opencvFƄӈDƬ

    ڿ_ó+opencvFcIτӈDƬ@ʾdȤ^ #include <opencv2/highgui/highgui.hpp> //#include <iostream> //using
    2019-04-17
  • vueʹel-uploadςļFeigngfļķ

    vueʹel-uploadςļFeigngfļķ

    һǰ˴a <el-upload class="step_content" drag action="string" ref="upload" :multiple="false" :http-req
    2019-04-17
  • ԔSpringĺęCهע

    ԔSpringĺęCهע

    ԔSpringĺęCهע һJavaĿһNه͵PϵҲһЩfČ󘋳ɵSpring@NfPϵQ
    2019-04-17
  • JSt_ʽ@ȡַַָָ֮֮ǰַ(])

    JSt_ʽ@ȡַַָָ֮֮ǰַ(])

    һҊĈ@?ǩmӋ?ַvar bgImg = "url (\"https://img30.360buyimg.com/sku/jfs/t26203/262/100869187/204098/1d1479e9/5b8
    2019-04-17
  • JSPBĺνB

    JSPBĺνB

    JSPBĺνB һ httpfhğoB oBָg[lՈor푑͑Ո Ǯͬһg[ٴΰlՈo
    2019-04-17
  • Spring@ȡApplicationContext󹤾ČF

    Spring@ȡApplicationContext󹤾ČF

    Spring@ȡApplicationContext󹤾ČF 1FĹ package com.util; import org.springframework.context.ApplicationConte
    2019-04-17
  • VueȾ^̜\

    VueȾ^̜\

    Vue ]ڽ^rʹ template 턓 HTMLģ宅ģ挍domcģ嵽挍domc߀Ҫ^һЩE ģ徎g
    2019-04-17
  • ʹwebpackvueĿF_ּܹ

    ʹwebpackvueĿF_ּܹ

    Ļnode.js_lhbnode֮½Ŀͨ^webpackFvue-cli_ּܹ ڄ|̵ˁfyĿܲnjWһNZ
    2019-04-17
  • JavaScript+Regex C̖at_ʽCԔ

    JavaScript+Regex C̖at_ʽCԔ

    ÑCr?õU֤šl嚽УљΘ?e˃ɷNCҿԸԼĿHrxmϵķ C
    2019-04-17