input上传文件-vue3 -ts使用formData上传和base64上传

农夫三拳有点疼=-=

已于 2023-08-10 11:23:52 修改

阅读量1.2k

点赞数 1

文章标签： vue3 ts 上传图片

于 2023-08-10 11:12:07 首次发布

本文链接：https://blog.youkuaiyun.com/m0_64207574/article/details/132205028

版权

文章描述了在Vue应用中，如何使用`file`输入元素和AntDesignVue库实现图片上传功能，包括处理文件格式、大小限制以及调用API上传到服务器的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

 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;
      }
    }