轻松上传图片：掌握ElementUI与iView在Express服务器上的技能

2023-11-25 05:22:49

使用ElementUI和iView实现图片上传

引言

在现代Web开发中，图片上传是不可或缺的功能。它可以用于头像上传、产品图片上传、新闻图片上传等场景。本文将介绍如何使用ElementUI和iView这两个流行的前端框架，将图片上传到Express服务器。

ElementUI图片上传

安装和引入

首先，通过以下命令安装ElementUI：

npm install element-ui

然后在项目中引入ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

创建上传组件

<template>
  <el-upload
    action="http://localhost:3000/upload"
    list-type="picture-card"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response) {
      console.log(response)
    },
    handleError(err) {
      console.log(err)
    }
  }
}
</script>

iView图片上传

安装和引入

安装iView：

npm install iview

引入iView：

import Vue from 'vue'
import iView from 'iview'
Vue.use(iView)

创建上传组件

<template>
  <iview-upload
    action="http://localhost:3000/upload"
    list-type="picture-card"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <i class="ivu-icon ivu-icon-ios-add-outline"></i>
  </iview-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response) {
      console.log(response)
    },
    handleError(err) {
      console.log(err)
    }
  }
}
</script>