IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> [已解决] 华为云创建chevereto图床 并在vue项目中实现图片上传功能 -> 正文阅读

[PHP知识库][已解决] 华为云创建chevereto图床 并在vue项目中实现图片上传功能

作者:recommend-item-box type_download clearfix

1 Chevereto图床搭建 (建议安装1.4.2版本 方便后面汉化)

1.1 chevereto 下载链接

1.2 安装可参考如下文章:

Chevereto图床搭建 | 利用云服务器搭建免费图床完整教程
Chevereto图床搭建教程 | 利用云服务器免费搭建私人图床
Chevereto——简介及安装

2 关于 Chevereto图床 汉化问题

2.1 chevereto图床最新1.5.1版本改成中文语言的方法

3 使用图片上传的api

使用postman测试如下
请添加图片描述

现在postman测试显示是成功了的
但是如果我们在vue项目中去使用,可能会碰到跨域问题
解决如下:

4 编辑 Chevereto 内部代码 允许跨域 [参考文章]

进入 Chevereto 图床服务的文件目录,拷贝和编辑 route.api.php 文件实现允许跨域:

cd app/routes/
cp route.api.php overrides/route.api.php

对 app/routes/overrides/ 目录下的 route.api.php 进行编辑:

// route.api.php 第二行加入以下代码,https://localhost 改为自己的 WordPress 所用域名
header('Access-Control-Allow-Origin: https://localhost');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-Requested-With, Origin, Accept');

然后在这个文件内找到 KaTeX parse error: Undefined control sequence: \Image at position 18: …loaded_id = CHV\?I?m?a?g?e?::uploadToWebsi…source); (一般在105行),替换为以下代码:

// admin 为图床中的用户名
$uploaded_id = CHV\Image::uploadToWebsite($source,admin);

保存之后,就解决了跨域问题
?

5 结合el-upload进行使用

请添加图片描述

代码如下:

<el-form-item label="图片" prop="img_url">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="upload"
        >
          <img
            v-if="ruleForm.img_url"
            width="80"
            height="80"
            :src="ruleForm.img_url"
            class="avatar"
          >
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      
      
//处理函数
upload(params) {
      const data = new FormData()
      data.append('source', params.file)
      this.$axios({
        url: 'http://124.71.112.249/api/1/upload/?key=这里填写你的Chevereto的key',
        method: 'post',
        data,
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(res => {
        console.log('上传图片成功', res)
        // 这一步的作用是用于图片回显
        this.ruleForm.img_url = res.data.image.url
        this.$message.success('上传成功!')
      }).catch(err => {
        console.log('图片上传失败', err)
      })
    },

6 如果传送时报 400

  1. 检查浏览器network中传输时图片格式是否被改变了 ,建议使用formdata来传输文件
  2. axios post请求头content-type默认是application/json,而我们需要的是multipart/form-data。
    :::
    请添加图片描述
  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞(CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行,多个线程依次执行,多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章      下一篇文章      查看所有文章
加:2022-01-11 23:46:49  更:2022-01-11 23:46:55 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 14:44:25-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码