VUE UPLOAD는 ACTION을 통해 업로드 결과 작업을 반환합니다.
<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을 통해 업로드 결과 조작을 되돌려 드리는 것이 바로 여러분이 공유하는 모든 내용입니다. 참고 부탁드리며 많은 응원 부탁드립니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.