账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element ui 上传文件问题
    50
    0
    使用了elementui 的上传文件组件,想在上传预览图片,但是现在预览可以,控制台报错,各位大佬帮看看,感谢 onBeforeUpload(file) { console.log(file,'file-----------') let reader = new FileReader() reader.onload = e => { let base64 = e.target.result //从本地读取的图片的base64格式,将它上传给服务器即可 this.fileList.push({ 'attachment': base64, 'number': 0, 'id': '' }); console.log(this.fileList,'filelist222222') } // console.log( this.formIdentify.ohtherCredentials ) reader.readAsDataURL(file) return false },回复下方的评论截图:
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 停不住的记忆 普通会员 1楼

      Element UI 是一个基于 Vue.js 的 UI 框架,它支持文件上传功能。要解决 Element UI 文件上传问题,你需要按照以下步骤操作:

      1. 安装依赖:确保你的项目已经安装了 element-uivue-lazyload 等依赖。在命令行中,输入以下命令进行安装:

      npm install element-ui vue-lazyload

      1. 配置 vue-lazyload:在项目根目录下,创建一个名为 lazyload.config.js 的文件,并在其中添加以下代码:

      javascript module.exports = { loaders: { default: { // 设置默认懒加载样式 template: '<div class="lazyload"><img :src="src" :loading="loading" :error="error" @error="error"></div>', options: { lazy: true, placement: 'center' } } } }

      这段代码将为 Element UI 的文件上传组件设置默认懒加载样式和位置。placement: 'center' 参数用于设置懒加载图片的中心位置。

      1. 添加文件上传组件:在项目根目录下,创建一个名为 upload.vue 的文件,并在其中添加以下代码:

      ```html

      ```

      这段代码定义了一个 upload 组件,用于上传文件。组件包括默认懒加载样式、上传按钮和失败时触发的事件。请确保在实际项目中替换 uploadUrlbeforeUpload 的值为实际的文件上传 URL 和自定义的懒加载方法。

      1. 测试文件上传:在项目根目录下,运行以下命令进行测试:

      npm run serve

      此时,你可以在浏览器中访问 http://localhost:8080/your-project-name/your-file-name/ 来测试文件上传功能。注意:请将 your-project-nameyour-file-name 替换为实际项目名称和文件名。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部