在工作中遇到的图片上传

69 阅读1分钟

废话不说直接上代码

<div class="brandName">
                    <span>品牌Logo:</span>
                     <div class="uploadModule">
                        <input
                            ref="uploadInput"
                            type="file"
                            class="dl-none"
                            name="icon"
                            @change="dealfilechange"
                        />
                        <div class="uploadImg" v-if="!fileImg" @click="uploadgogo">
                            <el-icon>
                                <plus />
                            </el-icon>
                        </div>
                        <img v-if="fileImg" :src="fileImg" @click="uploadgogo" />
                    </div>
                </div>
const uploadInput = ref<HTMLElement | null>(null);
const dealfilechange = (e: Event) => {
    const input = e.target as HTMLInputElement;
    let files = input.files;
    if (files) {
        //console.log(files[0])
        let files2 = Array.from(files)
        const formdata = new FormData();
        formdata.append('file', files2[0])
        proxy.$axios.post(requestList.uploadImg, formdata).then((res: any) => {
            if (res.data.code == 0) {
                fileImg.value = res.data.data.uploadFilePath
            } else {
                proxy.$message({
                    message: res.data.tip,
                    type: "error",
                });
            }

        });
    }
}

const uploadgogo = () => {
    // //console.log(uploadInput.value)
    let oBtn = uploadInput.value as HTMLInputElement;
    oBtn.click();
}