vue3上传图片

说明：action="http://192.168.1.188:8080/upload/admin"//上传图片的路径(一般有提供上传路径，写在标签上的)

1.上传多张图片，最多5张

<!-- html中 -->
<el-form-item label="商品图片" label-width="100px" style="width:100%;">
  <el-upload v-model="form.imgList" :limit="5" class="avatar-uploader"
    action="http://192.168.1.188:8080/upload/admin" list-type="picture-card" :headers="headers"
    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-exceed="handleLimit"
    :on-remove="handleRemove">
    <el-icon class="avatar-uploader-icon">
      <Plus />
    </el-icon>
  </el-upload>
</el-form-item>

<script setup lang="ts">
import { Plus, Upload } from '@element-plus/icons-vue'//引入图标
import { ElMessage, ElMessageBox } from 'element-plus'

// 上传图片
// 上传图片的请求头
const headers = reactive({
  "AdminToken": Cookies.get("token")
})

//上传成功后的回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form.value.imgList.push(response.url)
  form.value.img = form.value.imgList[0]
}

// 图片移除的回调函数
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  form.value.imgList = uploadFiles
}
// 图片上传前的函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
// 超过图片限制数量是的回调函数
function handleLimit() {
  ElMessage.error('图片不能超过5张!')
}
</script>

//css
<style lang="less" scoped>
.avatar-uploader .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .avatar-uploaders .avatars {
      width: 78px;
      height: 78px;
      display: block;
    }
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

2.上传1张图片

<!-- html中 -->
<el-form-item label="广告图片" label-width="200px" style="width:100%;" v-show="picRequire" id="uploadImg"
    :style="{ background: form.color }">
    <el-upload class="avatar-uploader" action="http://192.168.1.188:8080/upload/admin" :show-file-list="false"
      :headers="headers" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload>
  </el-form-item>

<script setup lang="ts">
import { Plus, Search } from '@element-plus/icons-vue'//引入图标
import { ElMessage, ElMessageBox, type FormInstance, type UploadProps } from 'element-plus'

// 上传图片
// action="http://192.168.1.188:8080/upload/admin"//上传图片的路径(一般有提供上传路径，写在标签上的)

// 上传图片的请求头
const headers = reactive({
  "AdminToken": Cookies.get("token")
})
// 成功后的回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form.value.imgUrl = response.url
  //将背景色统一为第一个像素点的封装函数(按照需求是否引入调用)
  canvasImgColor(form.value.imgUrl, (e: string) => {
    form.value.color = e
  })
}
// 上传图片前的回调
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/webp') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error('Avatar picture size can not exceed 1MB!')
    return false
  }
  return true
}
<script>

//css中
<style lang="less" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

3.上传图片是element ui的一个组件具体看官网

vue3上传图片

悦读