上传图片

要求，点击【新增】按钮，出现弹框，点击【上传图片】实现上传，使用了element-ui

为【新增】按钮添加响应函数 @click="handleAdd"

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
 
    </el-row>

 在【新增】按钮响应函数中写打开弹窗语句

 /** 新增按钮操作 */
      handleAdd() { 
        this.open = true;
        this.title = '添加信息';
      },

<!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <el-input v-model="form.lng" placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input v-model="form.lat" placeholder="请输入纬度" />
        </el-form-item>
        <el-form-item label="图片" prop="imgUrl">
          <el-upload class="upload-demo" :action="upurl" :limit="1" :headers="upheaders" :on-preview="handlePreview"
            :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError" :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" style="color: red;">只能上传一张图片，重传请删除上传成功的图片</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

 

 

在data中：

 data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 弹出层标题
        title: '',
        // 表单参数
        form: {},
       
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          sn: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          lng: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          lat: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          addr: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          imgUrl: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }]
        },

        // 图片
        upobj: {
          // siteId: ''
        },
        //这里用了若依的token
        upheaders: {
          Authorization: 'Bearer ' + getToken()
        },
        //上传图片的接口
        upurl: process.env.VUE_APP_BASE_API + '/device/site/uploadFile',
        fileList: [],

      };
    },

 这是需要引入的文件：

import axios from 'axios';
  import {
    getToken
  } from '@/utils/auth';

auth.js文件内容：（我还没看明白）

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

效果图：