xCss/Valine

如果我只想修复 图片上传的功能，不想改其他的，需要改哪些代码？

tzy13755126023 opened this issue · 3 comments

tzy13755126023 commented

image

如果我只想修复 图片上传的功能，不想改其他的，需要改哪些代码？ 并未找到 #396 #380 这部分的代码

xCss commented

你好，如果你是基于当前仓库的源码修改的，可以找到以下代码：

Valine/src/index.js

Lines 1045 to 1068 in c40826c

let uploadImage = (file,callback)=>{
let formData = new FormData();
formData.append('file', file);
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
try {
let json = JSON.parse(xhr.responseText);
callback && callback(null,json)
} catch (err) {
callback && callback(err)
}
} else {
callback && callback(xhr.status)
}
}
xhr.onerror = function(e){
console.log(e)
}
// xhr.open('POST', 'https://sm.ms/api/v2/upload?inajax=1',true);
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.open('POST','https://imgkr.com/api/files/upload',true);
xhr.send(formData);
}

将其修改为本地：

let uploadImage = (file,callback)=>{ 
    let reader = new FileReader();
    reader.onload = function(){
        // 这里能获取到文件的Base64
        console.log(reader.result)
        callback && callback(null,{data: reader.result})
    }
    reader.readAsDataURL(file)
 }

如果你想优化显示，可以使用URL.createObjectURL来创建blob URL：

let key = URL.createObjectURL(imageFile)

显示的时候可以用blob URL，最后提交的时候记得替换成Base64

参考：

tzy13755126023 commented
xCss commented

emmm 我的版本是 Valine v1.4.14 我找到了这部分代码 是否改这段代码  可以将 图片上传到我自己的图床呢 Q=function(e,t){   var n=new FormData;   n.append("image",e),   y.default.ajax({      type:"post",      url:"https://pic.alexhchu.com/api/upload",      data:n,      success:function(e){        t&&t(e)      } })}}

如果是要上传到你自己的图床，直接修改图床地址url:"https://pic.alexhchu.com/api/upload" 为你自己的地址就行了。

返回数据格式应该是类似于这样：

{
    'code': 200,
    'data': 'your image url',
    'msg': ''
}

你可以试试看~