當我們在使用 Element ui，Upload組件時，官網(wǎng)默認的基礎配置如下
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/" //這里目前是寫死的上傳路徑
:show-file-list="false" //上傳文件列表
:on-success="handleAvatarSuccess" //上傳成功后的回調(diào)函數(shù)
:before-upload="beforeAvatarUpload"> //上傳文件之前的的回調(diào)函數(shù)
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
現(xiàn)在的需求是，如果頁面只有 一個 el-upload組件，需要上傳的文件，根據(jù)不同的類型，切換不同的action 上傳路徑。
首先我這里選擇，通過調(diào)用 before-upload 上傳文件之前的鉤子函數(shù)，函數(shù)接收一個參數(shù)，就是上傳的文件信息，然后判斷文件的類型，如果上傳的是視頻文件，那么就，動態(tài)重寫 action 的上傳路徑，如果是圖片或者音頻，同樣的動態(tài)寫入相應的上傳路徑。
官網(wǎng)中，對上傳文件之前的鉤子函數(shù)，官網(wǎng)這里的描述，可能會讓大家產(chǎn)生誤導（官網(wǎng)沒錯，只是有的小伙伴理解錯了）。結合描述查看下面有問題的錯誤寫法。
錯誤寫法：
<el-upload
class="avatar-uploader"
:action="AudioAndVideoPath" //現(xiàn)在這里動態(tài)綁定地址參數(shù)
:show-file-list="false" //上傳文件列表
:on-success="handleAvatarSuccess" //上傳成功后的回調(diào)函數(shù)
:before-upload="beforeAvatarUpload"> //上傳文件之前的的回調(diào)函數(shù)
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
<script>
import { url } from '../../../api/Globaladdress/index'; //我這里導入全局地址總路徑
export default {
data() {
return {
url, //全局地址
AudioAndVideoPath: `` //音視頻上傳動態(tài)路徑
}
},
methods:{
beforeAvatarUpload(file) { //上傳文件之前的函數(shù)
console.log(file); //接收上傳的文件信息
const isvideo = file.type === 'video/mp4'; //視頻格式，查看上傳的文件是不是視頻或者音頻文件格式，拿到一個Booleans 值
const isaudio = file.type === 'audio/mpeg'; //音頻格式
if (isvideo) { //判斷如果isvideo等于true，代表，滿足要求是視頻格式。
this.AudioAndVideoPath = this.url + "/upload/fileVideo"; //我這里采用字符串拼接，動態(tài)重寫文件上傳路徑，這里的路徑是專門上傳視頻的。
return isvideo ;//（官網(wǎng)描述：如果返回false，就終止上傳，那么這里，isvideo 能夠進到if判斷，就肯定為 true，按官網(wǎng)描述推理，如果返回true，就不會終止上傳）
} else if (isaudio) { //判斷是否滿足音頻格式，如果滿足，動態(tài)重寫，上傳音頻時的路徑
this.AudioAndVideoPath = this.url + "/upload/fileAudio";
return isaudio ;//(上面描述同理)
} else { //如果上傳文件不滿足規(guī)定格式，再返回 false ，并提示，終止上傳，不用配置上傳路徑。
this.$message({
message: '上傳格式不準確!請上傳視頻或音頻格式文件',
type: 'warning',
duration: 6000
});
return false ;//都不滿足，再返回false終止上傳。
}
},
handleAvatarSuccess(response, file, fileList){ //上傳成功后的回調(diào)函數(shù)（錯誤寫法這里這里不會執(zhí)行）
console.log(response, file, fileList);
}
}
}
</script>
上述錯誤寫法，會造成，跨域或重定向問題，錯誤代碼404，因為上述錯誤寫法，在我的 beforeAvatarUpload 鉤子函數(shù)還沒，執(zhí)行的時候 ，Upload 組件中 action 路徑方法已經(jīng)調(diào)用了，而這時候，action 的動態(tài)路徑還沒有定義，所以，他會提示找不到路徑，可能會導航到當前頁面的本地地址，然后報錯404。
正確寫法如下：首先把 action動態(tài)綁定文章來源：http://www.zghlxwxcb.cn/news/detail-509426.html
<el-upload
class="avatar-uploader"
:action="AudioAndVideoPath" //現(xiàn)在這里動態(tài)綁定地址參數(shù)
:show-file-list="false" //上傳文件列表
:on-success="handleAvatarSuccess" //上傳成功后的回調(diào)函數(shù)
:before-upload="beforeAvatarUpload"> //上傳文件之前的的回調(diào)函數(shù)
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
<script>
import { url } from '../../../api/Globaladdress/index' ;//我這里導入全局地址總路徑
export default {
data() {
return {
url, //全局地址
AudioAndVideoPath: `` //音視頻上傳動態(tài)路徑
}
},
methods:{
beforeAvatarUpload(file) { //上傳文件之前的函數(shù)
console.log(file); //接收上傳的文件信息
const isvideo = file.type === 'video/mp4'; //視頻格式，查看上傳的文件是不是視頻或者音頻文件格式，拿到一個Booleans 值
const isaudio = file.type === 'audio/mpeg'; //音頻格式
if (isvideo) { //判斷如果isvideo等于true，代表，滿足要求是視頻格式，返回一個 Promise 對象
return new Promise((resolve) => {
this.$nextTick(() => {
this.AudioAndVideoPath = this.url + "/upload/fileVideo"; //我這里采用字符串拼接，動態(tài)重寫文件上傳路徑，這里的路徑是專門上傳視頻的。
resolve();
})
})
} else if (isaudio) { //判斷是否滿足音頻格式，如果滿足，動態(tài)重寫，上傳音頻時的路徑
return new Promise((resolve) => {
this.$nextTick(() => {
this.AudioAndVideoPath = this.url + "/upload/fileAudio";
resolve();
})
})
} else { //如果上傳文件不滿足規(guī)定格式，則返回 false ，并提示，終止上傳，不用配置上傳路徑。
this.$message({
message: '上傳格式不準確!請上傳視頻或音頻格式文件',
type: 'warning',
duration: 6000
});
return false;
}
},
handleAvatarSuccess(response, file, fileList){ //上傳成功后的回調(diào)函數(shù)
console.log(response, file, fileList);
}
}
}
</script>
上面就是我遇到的問題，以及解決方法，供大家參考。文章來源地址http://www.zghlxwxcb.cn/news/detail-509426.html
到了這里，關于Vue Element ui Upload組件在上傳文件時，動態(tài)切換 action上傳路徑的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
