A white, recently wrote upload function more to share, write a lot of bad comments, did not talk much on the code
configuration information for seven cattle write in my whole config inside you can see what code needs to go in the config configuration
remember to pack the next sdk
this is the download address https://developer.qiniu.com/kodo/sdk/1241/php seven cattle official website
quote
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
use Qiniu\Storage\BucketManager;
/**
* 七牛图片上传
* @return String 图片的完整URL
*/
public function upload()
{
if($this->request->isAjax()){
$file = request()->file($_FILES);
// $a=Db::name('qiye')->where('id',$id)->field('id,img')->find();
$file= $file['file'];
// dump($file);
require_once APP_PATH . '/../vendor/qiniu/autoload.php';
// 需要填写你的 Access Key 和 Secret Key
$accessKey = config('accessKey');
$secretKey = config('secretKey');
// 构建鉴权对象
$auth = new Auth($accessKey, $secretKey);
// 要上传的空间
$bucket = config('bucket');
$domain = config('DomainImage');
$url = config('url');
$token = $auth->uploadToken($bucket);
// 初始化 UploadManager 对象并进行文件的上传
$uploadMgr = new UploadManager();
// 调用 UploadManager 的 putFile 方法进行文件的上传
list($ret, $err) = $uploadMgr->putFile($token, $file['name'],$file['tmp_name']);
if ($err !== null) {
return ["err"=>1,"msg"=>$err,"data"=>""];
} else {
//返回图片的完整URL
return ["code"=>"2","msg"=>"上传完成","data"=>($url .'/'. $file['name']),"url"=>$file['tmp_name']];
}
}
}
This is a page upload button
<!-- 上传图片 -->
<div style="width: 100%;float: left;" id="uploadlist">
<label class="layui-form-label">图片</label>
<div style="float: left;" >
<div class="layui-upload-list">
<p id="demoText"></p>
<button type="button" class="layui-btn" id="up0">上传图片</button>
</div>
</div>
If you need to modify, delete or show, then you can look at this really fun
<!-- 循环图片 -->
{notempty name="$enterprise"}
{foreach $enterprise.img as $k =>$v}
<div style="float: left;margin-left:20px" class="deleted{$k}">
<div class="layui-upload-list">
<img name="img" class="layui-upload-img" id="demo1" width="150" height="150" src="{$enterprise.img[$k]}">
<p id="demoText"></p>
<button type="reset" class="layui-btn but2" lay-submit lay-filter="clear" data_id="{$k}" id="clear">删除图片</button>
</div>
</div>
{/foreach}
{/notempty}
</div>
Remove js
<!-- 删除 -->
<script type="text/javascript">
$(document).on("click","#clear",function(e){
var that = this;
var id = $(this).attr("data_id");
console.log(id);
$(".deleted"+id).remove();
});
</script>
Upload and submit pictures write more chaos, look on the line hhhh, click Upload a return address, and then the cycle period of html, delete the definition of a value, a loop attached to a value, click Delete to remove this value
<!-- 图片上传和提交-->
<input type="hidden" id="ids" value="0">
<script>
// var ChouseImage = [{notempty name="$enterprise.img"}];
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
// var id = document.getElementById("id").value;
var uploadInst = upload.render({
elem: '#up0' //绑定元素
,url: "{:url('admin/enterprise/upload')}" //上传接口
// ,data:{id}
,multiple:true
,done: function(res){
// ChouseImage.push(res.data)
// console.log(res)
if(res.code == 2) {
var keysss = $("#ids").val();
let html =
`<div style="float: left;margin-left:20px" class="deleted${keysss}">
<div class="layui-upload-list">
<img name="img" class="layui-upload-img" id="demo1" width="150" height="150" src=${res.data} >
<p id="demoText"></p>
<button type="reset" class="layui-btn but2" lay-submit lay-filter="clear" data_id="${keysss}" class="class" id="clear">删除图片</button>
</div>
</div>`
keysss++;
$("#ids").val(keysss);
$('#uploadlist').append(html);
$('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.id +'">');
} else {
layer.msg(res.msg);
}
}
,success:function(res){
}
,error: function(){
//请求异常回调
//演示失败状态，并重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败,重新上传</span>');
}
});
});
layui.use(['layer', 'form'], function() {
var layer = layui.layer,
$ = layui.jquery,
form = layui.form;
$(window).on('load', function() {
form.on('submit(admin)', function(data) {
var ChouseImage = [];
var El = Array.from($('.layui-upload-list img'))
El.forEach((el,index)=>{
// if(index>0){
ChouseImage.push(el.src)
// }
})
$.ajax({
url:"{:url('admin/enterprise/publish')}",
data:{data:$('#admin').serialize(),ChouseImage:ChouseImage.toString()},
// data:$('#admin').serialize(),ChouseImage:ChouseImage.toString(),
type:'post',
async: false,
success:function(res) {
if(res.code == 1) {
layer.alert(res.msg, function(index){
location.href = res.url;
})
} else {
layer.msg(res.msg);
}
}
})
return false;
});
});
});
</script>
Summary
1. lug look like
2. Download sdk package
3. Configure seven cattle information
4. Get Picture preceding address, Biography sleeve
5. Receive and then upload just fine