vue文件上传编写错误未成功的代码

admin · 发表于 2025-8-5 21:35:32

<template>
  <el-dialog
title="上传"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose"
  >
<el-form ref="form" :model="form" size="small" label-width="80px">
   <el-form-item label="文件名称:">
      <el-input v-model="form.contitle" disabled></el-input>
   </el-form-item>
   <el-form-item label="文件上传:">
      <div class="uppicture">
      <input type="file" class="upinput" ref="file" @change="showimg" />
      <i class="el-icon-plus" id="changes" @click="changeimg"></i>
      <p>上传文件图片附件</p>
      </div>
      <el-button type="primary" class="uploadbutton" @click="addupload">
      上传附件
      </el-button>
   </el-form-item>
</el-form>
   <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose"
      style="background: #f7f7f7"
      size="small">取消</el-button>
   </span>
  </el-dialog>
</template>

<script>
// 从API中引入uploadvideo组件
import { uploadvideo } from '@/utils/apis'
// 引入遮罩层组件
import { Loading } from 'element-ui'
export default {
  name: 'fileUpload',
  data () {
return {
   form: {
      // 文件名称
      contitle: ''
   },
   formdata: {}
}
  },
  props: {
// 显示隐藏
dialogVisible: {
   type: Boolean,
   // 必传
   required: true
}
  },
  methods: {
// 关闭之前
handleClose () {
   console.log('关闭之前')
   // .sync语法糖，单向数据流问题，
   // 父组件传递给子组件的数据，子组件直接修改会报错，需要传递给父组件修改
   this.$emit('update:dialogVisible', false)
},
// 输入获取事件
showimg () {
   const that = this
   console.log(that.$refs.file)
   console.log(that.$refs.file.files[0])
   // 文件名复制
   that.form.contitle = that.$refs.file.files[0].name
   // 声明一个formdata对象
   this.formdata = new FormData()
   // 赋值需要传递的文件
   this.formdata.append('multipartFile', that.$refs.file.files[0])
},
changeimg () {
   // 点击图标时候，触发input选择文件按钮
   this.$refs.file.dispatchEvent(new MouseEvent('click'))
},
// 上传附件
async addupload () {
   // 上传文件提示，未选择文件提示用户
   if (!this.form.contitle) {
      return this.$message.warning('请先在左侧上传文件')
   }
   // 开启遮罩层
   let loadingInstance = Loading.service({
      lock: true, // lockde 修改符---默认是false
      text: '正在上传文件，请耐心等待', // 显示在加载图标下方的加载文件
      spinner: 'el-icon-loading', // 自定义加载图标类名
      background: 'rgba(0, 0, 0, 0.7)', // 遮罩层的颜色
      target: document.querySelector('#futureTransferDialog') // loading覆盖的dom元素节点
   })
   const res = await uploadvideo(this.formdata)
   console.log('文档服务器上传文件', res)
   // 传递文件存储id
   this.$emit('updataurl', res.data.url)
   // 回显文件名称给父组件的form 表单
   this.$emit('updata', this.form.contitle)
   // 清空表单
   this.form.contitle = ''
   this.formdata = {}
   // 关闭弹框
   this.handleClose()
   // 关闭遮罩层
   loadingInstance.close()
}
  }
}
</script>
<style lang="less" scoped>
.v-deep .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
border-radius: 9px 9px 0 0;
background-color: #1488c6;
padding: 8px 20px;
.el-dialog__title {
   color: white;
   font-size: 16px;
}

.el-dialog__headerbtn {
   top: 12px;
   i {
      color: white;
   }
}
  }
  .el-dialog__footer {
text-align: center;
  }
  .el-dialog__body {
padding: 12px;
  }
  .uppicture {
width: 120px;
height: 120px;
border: 1px solid #717376;
position: relative;
cursor: pointer;
input {
   width: 100%;
   height: 100%;
   vertical-align: middle;
   opacity: 0;
}
i {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 30px;
   // background-color: skyblue;
}
p {
   position: absolute;
   bottom: -2px;
   left: 50%;
   word-break: keep-all;
   transform: translate(-50%);
}
.uploadbutton {
   position: absolute;
   bottom: 0;
   margin-left: 20px;
   position: relative;
}
&:hover {
   color: #2da9fa;
   border: 1px solid #2da9fa;
   p {
      color: #2da9fa;
   }
}
  }
  .uploadbutton {
position: absolute;
top: 70%;
left: 150px;
  }
}
</style>

admin · 发表于 2025-8-5 21:35:50

未成功的

		自动登录	找回密码
密码			注册