VUE UPLOAD는 ACTION을 통해 업로드 결과 작업을 반환합니다.

3670 단어 VUEUPLOADACTION결과
Upload action 방법으로 결과를 되돌릴 수 없습니다. on-success 방법으로 결과를 되돌릴 수 있습니다

<Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" style="float:right">
     <Button type="primary" icon="ios-cloud-upload-outline" > </Button>
 </Upload>
-----------------------------------------
computed: {
   uploadUrl() {    
   return baseUrl + "/ImportExcel/";   
  }
//file ImportExcel 
onSuccess(file){
    if(file.code=="1")
    {
     this.$Message.error(" :" + file.msg);
     return;
    }      
   },
추가 정보: Element-UI에 업로드된 action 주소 상대 문제
vue에 업로드 주소 접두사만 나타나고 구체적인 업로드 주소는 프로젝트 설정의 서버 주소입니다.
1. action 직접 상대 주소 쓰기

<el-upload
      class="import-btn"
      :action="/base_data/import_data"
      :data="uplaodData"
      name="files"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i> </el-button>
     </el-upload>
이러한 결과, 업로드 요청의 접두사는 모두 로컬localhost:8080이며, 내가 원하는 상대 서버의 주소가 아니다
2. 액션 주소를 차단하고 제가 직접 요청을 씁니다.

<el-upload
      class="import-btn"
      :action="111" // , , , 
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i> </el-button>
     </el-upload>
메서드에 이렇게 쓰여있어요.

beforeUpload(file){
  let fd = new FormData();
  fd.append('files',file);// 
  fd.append('id',this.srid);// 
  axios.post('/api/up/file',fd).then(function(res){
      alert(' ');
  })
  return false // action 
},
그렇겠지. 그런데 이런 내가 보낸 물건은 항상 비어 있어. 내가 FormData()의 사용법을 잘 모르겠지. 하지만 내가 단독으로 FormData()의 get 방법을 사용하면 모두 get할 수 있어. 나중에 보니 파일 인코딩 문제 때문이야.
기본 파일 인코딩 응용 프로그램/x-www-form-urlencoded는 이것이지만, 파일을 업로드하는 데 필요한 것은multipart/form-data (이 형식의 요청은 너무 잘 알고 있습니다. 파일 이름이 포함되어 있는지...) 물론 때로는 그렇습니다 (files: (binary))
아~, 정말 답답할 것 같아, 결국 내가 발견한 방법이 있어.
그게 바로!!!
1. 전역적으로 설정된 서버 주소 도입
import url from '@/http/http'
2. 데이터에서 URL을 정의합니다:',',
3、create 방법에서this.url = url;
4. 업로드 구성 요소의 action에서

<el-upload
      class="import-btn"
      :action="url+this.uploadUrl" // 
      :data="uplaodData"
      name="files"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i> </el-button>
     </el-upload>
자, 다 됐습니다. 상대 주소는 서버 주소이고 업로드 파일 인코딩도multipart/form-data입니다.
위의 VUE UPLOAD는 ACTION을 통해 업로드 결과 조작을 되돌려 드리는 것이 바로 여러분이 공유하는 모든 내용입니다. 참고 부탁드리며 많은 응원 부탁드립니다.

좋은 웹페이지 즐겨찾기