原理:dispatchEvent 自定義觸發事件，常用于自定義滑鼠事件或點擊事件 ,原生控制元件input打開上傳檔案
方案：vue專案,點擊自己的上傳檔案圖示，通過dispatchEvent主動觸發一個自定義上傳檔案事件 .
- 原生控制元件 input
accept 屬性:
accept = "audio/* " :接受所有的聲音檔案
accept = "video/* " :接受所有的視頻檔案accept = "image/* " :接受所有的影像檔案，
如需規定多個值，請使用逗號分隔（比如 <input accept="audio/*,video/*,image/*" />），
<input type="file" accept="image/*" // 可以打開相機或檔案，"jpg,png,gif"這種打開只能上傳特定檔案且沒有相機 @change="changeImage()" ref="avatarInput" style="display:none" >
- 隱藏原生上傳控制元件，使用自己上傳的圖示實作上傳功能
-
<template> <section> <!-- 自定義上傳按鈕 --> <div > <span>活動主K</span> <div @click="uploadImg(1)"> <img :src="https://www.cnblogs.com/lingXie/archive/2023/02/22/require('./images/[email protected]')" alt="" /> </div> </div> <!-- 原生控制元件 --> <input type="file" @change="fileImage" ref="filElem" style="display: none" accept="image/*" /> </section> </template> <script> export default { methods: { // 上傳圖片 uploadImg() { if (this.$store.state.isInApp) { console.log('isInApp'); } else { // 觸發一個自定義事件 this.$refs.filElem.dispatchEvent(new MouseEvent("click")); } }, fileImage(e) { let that = this; let file = e.target.files[0]; this.file = file; // 校驗圖片格式 var rFilter = /^(image\/jpeg|image\/jpg|image\/png|image\/gif)$/i; // 檢查圖片格式 if (!rFilter.test(file.type)) { $utilMsg.warn("不支持的格式，請重新上傳！"); return false; } // 判斷圖片是否大于10M if (file.size >= 10 * 1000 * 1024) { return $utilMsg.warn("上傳圖片過大，請重新選擇"); } this.upImgUrl() }, upImgUrl() { let params = new FormData(); params.append("file[]", this.file); let that = this return window.$.ajax({ type: "POST", url: xxxxx, data: params, contentType: false, processData: false, mimeType: "multipart/form-data", success: function (data) { data = JSON.parse(data); if (+data.code === 0) { let imgarr = data.data that.picThumb = imgarr[0].showPath; console.log('外部圖片', imgarr); } else { console.log('上傳失敗'); return } }, }); }, } } </script>
一步一叩首，今天的自己比昨天好一點就行，明天的自己需追尋
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544779.html
標籤：其他