• Element upload 组件实现自定义上传功能


    <el-form-item label="照片">
      <el-upload
        v-if="operType !== 'details'"
        ref="upload"
        class="upload-demo"
        accept='.jpg,.png'
        :action="`${httpConfig.hashUrl}/sys/core/file/upload.do`"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
        :http-request="uploadFile">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
      </el-upload>
      <img style=" 200px" v-if="imageUrl" :src="imageUrl" class="avatar">
      <span v-if="!imageUrl && operType === 'details'">--</span>
    </el-form-item>
    async uploadFile(files) { try { var formData = new FormData(); formData.append("file", files.file); formData.append("types", "Image"); formData.append("id", files.file.uid); formData.append("name", files.file.name); formData.append("type", files.file.type); formData.append("lastModifiedDate", files.file.lastModifiedDate); formData.append("size", files.file.size); formData.append("from", 'SELF'); const { data } = await fileUpload(formData) this.form.photo = data[0].fileId } catch (error) { } },
  • 相关阅读:
    调用序号
    图片经过时悬停动画
    左侧楼层导航
    dede如何实现二级栏目导航的仿制
    列表页调取二级栏目
    jquery 点击空白处隐藏div元素
    加入收藏功能
    31通过属性名获得属性值
    29.模板式邮箱验证
    28.九九乘法表
  • 原文地址:https://www.cnblogs.com/fczbk/p/14439634.html
Copyright © 2020-2023  润新知