tempent
<AFormItem label="白色图标" name="iconWhiteUrl">
<div class="inputBox">
<span>上传文件
<input
id="iconWhiteInp"
accept="image/png"
class="img-input"
type="file"
@change="(file)=>handleChangeIconWhiteUrl(file)"
/>
</span>
</div>
<p>{{ value.iconWhiteUrl }}</p>
</AFormItem>
ts
import { defineComponent, reactive,ref ,nextTick} from 'vue'
import {uploadImg} from "./addOrChange"
const handleChangeIconWhiteUrl = async(e:any)=>{
iconWhiteUrlList.value =[] // 自己展示的返回图片地址
uploadImg(e,'white') //调用上传方法
const iconWhiteInp = document.getElementById('iconWhiteInp') as HTMLInputElement | null; //获取元素清空value
if(iconWhiteInp){
iconWhiteInp.value = ''
}
}
//addOrChange文件封装引入,这里是传formData的
import { reactive } from 'vue';
import { message } from 'ant-design-vue'
import api from '@/api/api'
export const addOrChangeForm = reactive({
iconWhiteUrl:"",
})
// 上传图片传formdata对象方法
export const uploadImg = async(e:any,type:string)=>{
const fileFormData = e.target.files[0]
if (!uploadImgRules.type.includes(fileFormData.type)) {
message.destroy()
message.error('图片格式不符合要求,请重新上传png格式图片')
return
}
if (fileFormData.size > uploadImgRules.size) {
message.destroy()
message.error(`图片上传超过30kb,请重新上传`)
return
}
let formData = new FormData() //传formdata对象方法
formData.append('file',fileFormData);
const data = await api.hotWordIcon.uploadImgIcon(formData)
if(data?.retcode ==0){
if(type=='white'){
addOrChangeForm.iconWhiteUrl = data.data
}
if(type=='black'){
addOrChangeForm.iconBlackUrl = data.data
}
}
}
// 上传图片 传base64位文件流方法
export const uploadImg = async(e:any,type:string)=>{
const fileFormData = e.target.files[0]
const resultFile = e.target.files; // input 获取的文件列表
const aBlob = new Blob([resultFile[0]],{type:'image/png'}) // 指定转换成blob的类型
const reader = new FileReader(); // 3 新建 FileReader 对象,用于操作文件
reader.readAsDataURL(aBlob) // 4 将文件转换成指定类型的数据
reader.onload= async(ev:any)=>{
const base64Url = ev.target.result; // 5 base64内容
if (!uploadImgRules.type.includes(fileFormData.type)) {
message.destroy()
message.error('图片格式不符合要求,请重新上传png格式图片')
return
}
if (fileFormData.size > uploadImgRules.size) {
message.destroy()
message.error(`图片上传超过30kb,请重新上传`)
return
}
const data = await api.hotWordIcon.uploadImgIcon(base64Url)
if(data?.retcode ==0){
if(type=='white'){
addOrChangeForm.iconWhiteUrl = data.data
}
if(type=='black'){
addOrChangeForm.iconBlackUrl = data.data
}
}
}
}
css
.inputBox{
margin-top: 5px;
span{
padding: 6px 18px;
background-color: #456fff;
color: #fff;
line-height: 10px;
position: relative;
}
input{
width: 90px;
height: 35px;
position: absolute;
top: 0px;
left: 0px;
border: 1px solid red;
opacity: 0;
}
}